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

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ć”.

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