如何像传统方式一样使用AngularJs上传文件

Question

我已经试了好几天了.假设我有一个如下形式:

    <form ng-submit="create()" class="form-horizontal" enctype="multipart/form-data">
      <div class="control-group">
        <label class="control-label">name : </label>
        <div class="controls">
          <input type="text" class="input-xlarge" ng-model="message.title" />
        </div>
      </div>
      <div class="control-group">
        <label class="control-label">avatar : </label>
        <div class="controls">
          <input type="file" ng-model="message.avatar" name="message[avatar]" />
        </div>
      </div>
      <div class="well">
        <input class="btn btn-large btn-primary" type="submit" value="????" />
      </div>
    </form>

我正在使用carrierwave gem处理场景后面的文件上传.我的控制器是这样的:

 $scope.create = function($scope.message){
   var deferred = $q.defer();
   $http({
       method: 'POST',
       url: '/resources/messages',
       data: $.param({message: message}),
       headers: {'Content-Type': 'multipart/form-data'}
   }).
     success(function(data, status, headers, config){
       deferred.resolve(data);
     }).
     error(function(data, status, headers, config){
       deferred.reject(status);
     });
   return deferred.promise;
  };

但它不起作用.我打算做的是创建一个表单并像旧的方式一样上传所有内容,但是我发现的例子如ng-upload,或者像这篇文章,或jquery文件上传,它们不符合我的需要.是否有用于此目的的示例或示例代码？谢谢.

Answer 1

我认为"像旧的方式"将是不使用Ajax,但我猜这不是你的意思.:)

@ shaunhusain的小提琴是如何使用FormData对象来处理文件上传的一个很好的例子.并使用此站点作为参考,您可以使用它transformRequest来合并FormData对象.

保留基本$http代码,修改它以添加转换对象:

$scope.create = function(message){
var deferred = $q.defer();
$http({
   method: 'POST',
   url: '/resources/messages',
   data: message // your original form data,
   transformRequest: formDataObject  // this sends your data to the formDataObject provider that we are defining below.
   headers: {'Content-Type': 'multipart/form-data'}
}).
 success(function(data, status, headers, config){
   deferred.resolve(data);
 }).
 error(function(data, status, headers, config){
   deferred.reject(status);
 });
return deferred.promise;
};

创建一个工厂,将工作表单数据合并到可发送的有效负载中.它将遍历您的表单数据(包括上传的文件)并返回一个发送者友好的对象:

app.factory('formDataObject', function() {
    return function(data) {
        var fd = new FormData();
        angular.forEach(data, function(value, key) {
            fd.append(key, value);
        });
        return fd;
    };
});

我没有测试过这个,但它应该开箱即用.