如何使用$ 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()来获取添加到文件输入元素的文件数据。有很多方法可以实现它，但这可以让您访问POST到api所需的数据。