AngularJs Ajax POST-Formular mit Datei-Upload

Question

Ich versuche ein Formular zu erstellen, das mit einer Ajax-Anfrage an eine API gesendet wird, die bereits mit Ajax erstellt wurde. Aus irgendeinem Grund möchte die Datei einfach nicht in das System übertragen werden, obwohl bereits ein Back-End dafür gebaut wurde, und es funktioniert gut.

sieht Mein Service dieses wie auf einem Tutorial basiert ich hier gefunden: http://badwing.com/multipart-form-data-ajax-uploads-with-angularjs/

addActivity: function(url){ 
     return $http({ 
      method: 'POST', 
      url: REQUEST_URL + 'Volunteering/AddActivity?token=' + token + url, 
      headers: { 
       'Content-Type': 'multipart/form-data' 
      }, 
      data: { 
       file: $scope.file 
      }, 
      transformRequest: formDataObject 
     }). 
     then(function(result) { 
      console.log(result); 
      return result.data; 
     }); 
    }, 

ich das Gefühl habe, es ist nur etwas wirklich gering, dass ich fehle, kann jemand etwas Hilfe anbieten?

Answer 1

Ich konfrontiert ein ähnliches Problem.

Die Lösung ist Formdata

var formData = new FormData(); 
formData.append("file", $scope.file); 

und ersetzen

data: { 
      file: $scope.file 
     } 

mit

data: { 
      formdata 
     } 

Answer 2

Die Daten sollten data: $scope.file

und wichtige Sache zu verwenden: yo Sie sollten 'Content-Type': undefined festlegen, damit der Browser den richtigen Inhaltstyp einstellt.

Answer 3

Ich hatte Probleme beim Implementieren des Dateiuploads mit angular + laravel. Jedes Mal, wenn ich versuchte, das mehrteilige Formular zu verschicken, würde der Server die Formulardaten nicht erhalten, selbst wenn es eindeutig gesendet wurde, oder so dachte ich. Ich fand schließlich Artikel, der alle meine Probleme löste.

Lange Rede kurzer Sinn, ist dies der $ http Aufruf:

var data = new FormData(); 

data.append("file", file); 

$http.post("//myDomain.com/api/demo", data, { 
    headers: { 'Content-Type': undefined }, 
    transformRequest: angular.identity 
}).success(function (data, status, headers, config) { 

}).error(function (data, status, headers, config) { 

}); 

Die andere Antwort von rolin.tencent.Shenzhen auch Content-Type als undefined erwähnte Einstellung es die Browser Art abzulassen.

Answer 4

Sie dieses Plugin nutzen können, ist es sehr zu konfigurierbar: https://github.com/danialfarid/ng-file-upload