Dlaczego wysyłanie pliku jest tak trudne przy użyciu kątowej? [Zamknięte]

18

Muszę wysłać plik (bardzo duży plik) na serwer. Studiuję, jakie mam opcje i jak to zrobić. Używam angular + express + nodejs.

Jeśli użyję prostego formularza, mogę bez problemu złapać plik na serwerze za pomocą multera. Jest bardzo proste. HTML to tylko forma, w której określam cel itp. I wszystko działa. Kod nodejs jest również bardzo prosty i bezpośredni.

Gdy tylko spróbuję użyć kąta, wszystko staje się niesamowicie skomplikowane. To znaczy, muszę użyć dyrektywy i nadal mam problemy z serwerem. Tak jak powiedziałem, używam multera, który wymaga, aby dane były „wieloczęściowe / dane formularza”, i otrzymuję z serwera „Błąd: Wieloczęściowy: Nie znaleziono granicy”

Istnieje wiele modułów do ładowania plików pod kątem. Co pokazuje, że jest to powtarzający się problem z więcej niż jednym rozwiązaniem. Teraz nie chcę pisać kodu, ponieważ o to prosiłem w Stack Overflow . Moje pytanie jest bardziej subtelne:

Dlaczego to, co można zrobić za pomocą prostej formy, jest tak skomplikowane pod kątem? Nie mam na myśli tego źle. Mam na myśli to w sposób „chcę zrozumieć”.

cauchy
źródło
czy jest to jakoś związane z twoim ostatnim pytaniem w Stack Overflow ? „Jak rozwiązać błąd„ Nie znaleziono granicy ”i co to znaczy ...”
komnata
2
Tak, dlatego umieściłem link w pytaniu. Ale tutaj nie chcę rozwiązać problemu. Chciałbym przede wszystkim wiedzieć, dlaczego jest to problem.
cauchy

Odpowiedzi:

21

Angular jest przeznaczony do aplikacji jednostronicowych, formularze są wysyłane przy użyciu AJAX, aby uniknąć ponownego załadowania strony. Aby wysyłać formularze wieloczęściowe za pomocą AJAX, Twoja przeglądarka musi obsługiwać FormData(IE10 +): http://caniuse.com/#search=FormData

https://developer.mozilla.org/en-US/docs/Web/API/FormData

ngModelnie działa z wejściem [typ = "plik"], więc musisz stworzyć własną dyrektywę. Twoja własna dyrektywa powinna być prosta: po zmianie zaktualizuj Fileobiekt w swoim zakresie.

Wysyłając formularz, utwórz FormDataobiekt i dodaj do niego pliki, używając FormData.setlub FormData.append. Możesz przesłać swoje dane FormData przy pomocy $httplub $resource, i polegasz na przeglądarce do ustawiania typu zawartości i granicy.

var formData = new FormData();
formData.append('file', $scope.file);
$http.post('yourUrl', formData, {
   transformRequest: angular.identity,
   headers: {'Content-Type': undefined}
}).then(function () {
   // ...
});

angular.identity uniemożliwia Angularowi robienie czegokolwiek na naszych danych (np. serializowanie ich).

Polecam ten artykuł: https://uncorkedstudios.com/blog/multipartformdata-file-upload-with-angularjs

Thomas Roch
źródło
3
Zastanawiam się, dlaczego dyrektywa w sprawie plików jest pominięta pod kątem!
user237944,