Wie wird das Formular mit Eingabedateien serialisiert?

Question

Ich habe Formular mit Textfeld und:

<input type="file" name="files" file-input="files" multiple /> 

Wie dieses Formular serialiaze und mit AJAX mit TextArea- Wert und Dateien senden:

ich auf diese Weise versucht:

$scope.send = function(data) { 

      var path = $filter('sprintf')(paths.comment.send, $scope.issue.project.id, $scope.issue.campaign.id, $scope.issue.id); 

      var formData = new FormData(); 

      angular.forEach($scope.files, function(value, key) { 
       formData.append(key, value); 
      }); 

      formData .append('body', $scope.comment.body); 

      $http({ 
        method: 'POST', 
        url: path, 
        transformRequest: angular.identity, 
        headers: { 
         'Content-Type': 'multipart/form-data', 
         'X-CSRF-Token': $('meta[name=csrf-token]').attr('content') 
        }, 

        data: formData 
       }) 

       .then(function(data) { 
        console.log(data); 

       }, 

       function(response) { 
        console.log(response); 
       }); 

     }; 

Aber es tut funktioniert nicht

Answer 1

Wenn Sie ein FormData-Objekt senden, das von FormData API erstellt wird, ist es wichtig, den Inhaltstypheader auffestzulegen.

var formData = new FormData(); 

    angular.forEach($scope.files, function(value, key) { 
     formData.append(key, value); 
    }); 

    formData .append('body', $scope.comment.body); 

    $http({ 
      method: 'POST', 
      url: path, 
      transformRequest: angular.identity, 
      headers: { 
       //'Content-Type': 'multipart/form-data', 
       //USE content type undefined 
       'Content-Type': undefined, 
       'X-CSRF-Token': $('meta[name=csrf-token]').attr('content') 
      }, 

      data: formData 
     }) 

Normalerweise wird der $http Dienst setzt den Inhaltstyp application/json. Wenn der Inhaltstypheader undefined ist, wird der Inhaltstyp von XHR send method festgelegt.

In diesem Fall muss die XHR API die encapsulation boundary mit dem Content-Typ-Header enthalten. Es "funktioniert nicht" mit formData-Objekten, wenn die XHR-API gezwungen wird, einen Inhaltstypkopf ohne encapsulation boundary zu verwenden.