Warum ist das Senden einer Datei mit Angular so schwierig? [geschlossen]

Ich muss eine Datei (sehr große Datei) an einen Server senden. Ich lerne, welche Optionen ich habe und wie ich das mache. Ich benutze eckige + Express + Nodejs.

Wenn ich ein einfaches Formular verwende, kann ich die Datei problemlos mit multer auf dem Server abfangen. Ist sehr einfach. Das HTML ist nur eine Form, in der ich das Ziel etc. spezifiziere und alles funktioniert. Der NodeJS-Code ist auch sehr einfach und unkompliziert.

Sobald ich Winkel verwende, wird alles unglaublich kompliziert. Das heißt, ich muss eine Direktive verwenden und habe immer noch Probleme mit dem Server. Wie gesagt, ich verwende Multer, was erfordert, dass die Daten "mehrteilig / Formulardaten" sind, und ich erhalte vom Server "Fehler: mehrteilig: Grenze nicht gefunden".

Es gibt viele Module, um Dateien im Winkel zu laden. Was zeigt, dass es sich um ein wiederkehrendes Problem mit mehr als einer Lösung handelt. Nun, ich möchte keinen Code veröffentlichen, da ich bei Stack Overflow darum gebeten habe . Meine Frage ist subtiler:

Warum ist das, was mit einer einfachen Form gemacht werden kann, im Winkel so kompliziert? Ich meine es nicht schlecht. Ich meine es so, wie ich es verstehen will.

Bei Einseitenanwendungen werden Formulare mit AJAX gesendet, um ein erneutes Laden der Seite zu vermeiden. Zum Senden von mehrteiligen Formularen mit AJAX muss Ihr Browser FormData(IE10 +) unterstützen: http://caniuse.com/#search=FormData

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

ngModelfunktioniert nicht mit input [type = "file"], daher müssen Sie Ihre eigene Direktive erstellen. Ihre eigene Anweisung sollte einfach sein: Aktualisieren Sie beim Ändern ein FileObjekt in Ihrem Bereich.

Erstellen Sie beim Senden Ihres Formulars ein FormDataObjekt und fügen Sie Ihre Datei (en) mit FormData.setoder hinzu FormData.append. Sie können Ihre FormData mit $httpoder senden $resource, und Sie verlassen sich auf den Browser, um den Inhaltstyp und die Begrenzung festzulegen .

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

angular.identity verhindert, dass Angular irgendetwas an unseren Daten tut (wie zum Beispiel sie zu serialisieren).

Ich empfehle diesen Artikel: https://uncorkedstudios.com/blog/multipartformdata-file-upload-with-angularjs