AngularJs Modulo POST Ajax con caricamento file

Question

Sto tentando di impostare un modulo da inviare utilizzando una richiesta Ajax a un'API che è già stata creata utilizzando Ajax. Per qualche ragione, il file non vuole essere trasferito al sistema sebbene sia già stato creato un back-end per gestirlo, e funziona perfettamente.

Il mio servizio si presenta come questo sulla base di un tutorial che ho trovato qui: 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; 
     }); 
    }, 

ho la sensazione è solo qualcosa di veramente minore che mi manca, chiunque può offrire qualche aiuto?

Answer 1

Ho affrontato un problema simile.

La soluzione è quella di utilizzare formdata

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

e sostituire

data: { 
      file: $scope.file 
     } 

con

data: { 
      formdata 
     } 

Answer 2

I dati dovrebbero essere data: $scope.file

e cosa importante: yo È necessario impostare 'Content-Type': undefined per impostare il browser sul tipo di contenuto corretto.

Answer 3

Ho riscontrato problemi nell'implementazione del caricamento di file con angular + laravel. Ogni volta che ho provato a inviare il modulo multipart, il server non ha ricevuto i dati del modulo, anche se è stato inviato chiaramente, o almeno così pensavo. Ho finalmente trovato l'articolo THIS che ha risolto tutti i miei problemi.

Per farla breve, questo è il $ chiamata http:

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) { 

}); 

L'altra risposta da rolin.tencent.Shenzhen ha anche ricordato l'impostazione Content-Type come undefined di lasciare il browser risolverlo.

Answer 4

È possibile utilizzare questo plugin, è altamente configurabile anche: https://github.com/danialfarid/ng-file-upload