AngularJS用formdata上傳圖片

Question

我想將圖片作爲formData的一部分發布到我的客戶端後端API，考慮到API只允許將文件作爲表單數據的一部分發送，而不需要上傳物理文件的URL。下面是我到目前爲止使用的代碼，我也嘗試了一些Angular文件上傳模塊。有角度的文件上傳，但沒有我能找到的幫助我將文件作爲表單數據（多部分/表單數據）的一部分發布，因爲所有人都希望URL能夠上傳物理文件。有人可以幫助我找到一種方式來發布圖片/文件作爲表單數據或告訴我什麼，我在我的代碼中做錯了嗎？在發佈使用謝謝

服務方法：

 var deferred = $q.defer(); 
     $http({ method:'POST', 
       url:'http://localhost/api/clients.php', 
       data: { 
        action: 'updateClient', 
        img: pictureFile 
       }, 
       transformRequest: angular.identity, 
       headers: { 'Content-Type': 'multipart/form-data', 
          'Token': '1234567890' 
         } 
      }).success(function(data,status,headers,config){ 
       deferred.resolve(data); 
      }).error(function(data,status,headers,config){ 
       deferred.reject(status); 
      }); 

     return deferred.promise 

Form.html

<form name="clientForm"> 
<fieldset> 
    <input id="name" type="text" placeholder="Name" ng-model="client.name"> 
    <input type="file" file-model="pictureFile"/> 
</fieldset> 
<button type="submit" ng-click="updateClient(client, pictureFile)">Submit</button> 
</form> 

指令

directive('fileModel', ['$parse', function ($parse) { 
    return { 
     restrict: 'A', 
     link: function(scope, element, attrs) { 
      var model = $parse(attrs.fileModel); 
      var modelSetter = model.assign; 

      element.bind('change', function(){ 
       scope.$apply(function(){ 
        modelSetter(scope, element[0].files[0]); 
       }); 
      }); 
     } 
    }; 
}]); 

Answer 1

angular-file-upload讓您發送表單/範圍數據+文件（S） 。以下代碼來自他們的文檔，記下$ upload.upload（）方法中使用的「數據」和「文件」參數

//inject angular file upload directives and service. 
    angular.module('myApp', ['angularFileUpload']); 

    var MyCtrl = [ '$scope', '$upload', function($scope, $upload) { 
     $scope.onFileSelect = function($files) { 
     //$files: an array of files selected, each file has name, size, and type. 
     for (var i = 0; i < $files.length; i++) { 
      var file = $files[i]; 
      $scope.upload = $upload.upload({ 
      url: 'server/upload/url', //upload.php script, node.js route, or servlet url 
      // method: POST or PUT, 
      // headers: {'header-key': 'header-value'}, 
      // withCredentials: true, 
      data: {myObj: $scope.myModelObj}, 
      file: file, // or list of files: $files for html5 only 
      /* set the file formData name ('Content-Desposition'). Default is 'file' */ 
      //fileFormDataName: myFile, //or a list of names for multiple files (html5). 
      /* customize how data is added to formData. See #40#issuecomment-28612000 for sample code */ 
      //formDataAppender: function(formData, key, val){} 
      }).progress(function(evt) { 
      console.log('percent: ' + parseInt(100.0 * evt.loaded/evt.total)); 
      }).success(function(data, status, headers, config) { 
      // file is uploaded successfully 
      console.log(data); 
      }); 
      //.error(...) 
      //.then(success, error, progress); 
      //.xhr(function(xhr){xhr.upload.addEventListener(...)})// access and attach any event listener to XMLHttpRequest. 
     } 
     /* alternative way of uploading, send the file binary with the file's content-type. 
      Could be used to upload files to CouchDB, imgur, etc... html5 FileReader is needed. 
      It could also be used to monitor the progress of a normal http post/put request with large data*/ 
     // $scope.upload = $upload.http({...}) see 88#issuecomment-31366487 for sample code. 
     }; 
    }];