如何使用$ resource在AngularJS中上傳文件？

Question

我想用$ resource的AngularJS從客戶端上傳文件。

需要將FormData發送到服務器。

我用下面的代碼試圖

MyFile.tpl.html

<input file-model="uploadingfile" type="file"/><br/> 

MyDirective.js

angular.module('upload.upload', [ 
]) 

.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]); 
      }); 
     }); 
    } 
}; 
    }]); 

MyController.js

var myservercall = $resource("my/rest/path/:filename", { filename: '@filename'}); 

var file = $scope.uploadingfile; 
var fd = new FormData(); 
fd.append('upload', file); 
myservercall.save({filename: file.name}, here i don't know how to send the form data); 

我如何做這個工作？

Answer 1

您可以使用FileReader()來獲取添加到文件輸入元素的文件的數據。有許多方法可以實現它，但是這會讓您訪問需要發佈到api的數據。