Javascript 如何在AngularJS中上载多部分表单？

表单视图：

        <form enctype="multipart/form-data" ng-submit="upload(file)">

            <input type="file" ng-model="modal.file" accept="image/gif" app-filereader /><br />

            <br>

            <textarea name="description" placeholder="Description" ng-model="description" id="" cols="30" rows="10"></textarea>

            <br>

            <input type="hidden" name="user" ng-model="user" value="{{ user }}" />

            <br>

            <input type="submit" value="Submit" class="network-sensitive button button-block button" />

        </form>

“我的服务”中的上载功能：

upload: function(file) {
  var token = $window.sessionStorage.token;

  var url = 'http://url.co/api/posts/creates';

  var $cache = $cacheFactory.get('$http');

  var deffered = $q.defer();

  var data = $cache.get(url);

  if(!data) {
      $http({
        url: url, 
        method: "POST",
        params: { access_token: token },
        data: file,
        headers: {'Content-Type': undefined },
        transformRequest: angular.identity
      }).then(function(res) {
      deffered.resolve(res);
    });
  } else {
    deffered.resolve(data);
  }

  return deffered.promise;
  }

我没有包括控制器代码，因为它只是将表单数据从模式中继到服务，并且该部分正在工作

我遇到的问题是，文件是以编码数据的形式提交的（我对二进制数据和blob等方面的知识有点不确定）。我的API（用Symfony2编写）希望提交正常的文件，而不是数据字符串

---

那么，我如何将这个二进制blob转换成一个可以提交的图像文件呢？还是我遗漏了什么

问题在于$http服务，默认情况下使用内容类型为application/json，在您的情况下，它必须是application/x-www-form-urlencoded 要解决此问题，您可以使用以下指令：，它还支持随文件发送数据

另一种方法是在指令中使用formData对象和XmlHttpRequest，如下所示：

                var data = new FormData();
                var xhr = new XMLHttpRequest();
                data.append('file', files[i], files[i].name);
                xhr.open('POST', scope.mseUploadFile);
                xhr.onreadystatechange = function () {
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        var result = xhr.responseText;

                        if (scope.callback) {
                            scope.$apply(function () {
                                scope.callback({ $data: result });
                            });
                        }

                    }
                    else if (xhr.readyState == 4 && xhr.status == 400) {
                        scope.$apply(function () {
                            if (scope.onError) {
                                scope.onError({ $error: xhr.responseText });
                            }
                            handleError(xhr.responseText);
                        });

                    }
                };
                xhr.send(data);

使用此模块 使用起来非常简单

例：

var$文件//单个文件
$scope.sendFiles=函数（）{
$upload.upload({
url:yourUrl，
方法：“张贴”，
数据：{data:$scope.yourOtherObject}，
文件：$file
}).success（函数（数据、状态、标题、配置）{
//文件已成功上载
控制台日志（数据）；
log（“文件上传成功”）；
}).错误（功能（数据、状态）{
log（“文件上传失败”）；
});
} 
$scope.onFileSelect=函数（$files）{
对于（变量i=0；i<$files.length；i++）{
$file=$files[i]；//设置单个文件
}
};

HTML代码

<input type="file" name="myfile" ng-file-select="onFileSelect($files)" />
<button ng-click='sendFiles()'>Send file</button>

发送文件

    var $file;//single file 
    $scope.sendFiles= function(){
     $upload.upload({
                        url: yourUrl,
                        method: "POST",
                        data: { data: $scope.yourOtherObject },
                        file: $file
                    }).success(function (data, status, headers, config) {
                        // file is uploaded successfully
                        console.log(data);
                        console.log("File upload SUCCESS");
                    }).error(function (data, status) {
                       console.log("File upload FAILED");
                    });
    } 

    $scope.onFileSelect = function ($files) {
                for (var i = 0; i < $files.length; i++) {
                    $file = $files[i];//set a single file
                }
           };

<input type="file" name="myfile" ng-file-select="onFileSelect($files)" />
<button ng-click='sendFiles()'>Send file</button>