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ć”.
źródło
Odpowiedzi:
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=FormDatahttps://developer.mozilla.org/en-US/docs/Web/API/FormData
ngModel
nie działa z wejściem [typ = "plik"], więc musisz stworzyć własną dyrektywę. Twoja własna dyrektywa powinna być prosta: po zmianie zaktualizujFile
obiekt w swoim zakresie.Wysyłając formularz, utwórz
FormData
obiekt i dodaj do niego pliki, używającFormData.set
lubFormData.append
. Możesz przesłać swoje dane FormData przy pomocy$http
lub$resource
, i polegasz na przeglądarce do ustawiania typu zawartości i granicy.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
źródło