使用Angular JS在同一请求中上传文件Formdata和JSON数据答案

【问题标题】：Uploading files Formdata and JSON data in the same request with Angular JS使用Angular JS在同一请求中上传文件Formdata和JSON数据
【发布时间】：2015-08-03 07:43:40
【问题描述】：

如何将我的两个 $http.post 合并为一个 http post？

$scope.myMethod = function(){
    var fd = new FormData();
    angular.forEach($scope.files, function(file){
        fd.append('file', file);
    });

    $http.post('my_url', fd, {
        transformRequest: angular.identity,
        headers: {'Content-Type': undefined}
    }).success(function(result){
        console.log(result);
    });

    $http.post('my_url', {imgx: $scope.imgx, imgy: $scope.imgy, imgh: $scope.imgh, imgw: $scope.imgw}).success(
        function(data){
        console.log(data);
    });
}

非常感谢任何帮助，谢谢

【问题讨论】：

标签： jquery angularjs http-headers form-data

【解决方案1】：

try something like this:

$scope.myMethod = function(){
    var fd = new FormData();
    angular.forEach($scope.files, function(file){
        fd.append('file', file);
    });

var data = {};
    data.fd = fd;
    data.otherData  =   {imgx: $scope.imgx, imgy: $scope.imgy, imgh: $scope.imgh, imgw: $scope.imgw};  

    $http.post('my_url', fd, {
        transformRequest: angular.identity,
        headers: {'Content-Type': undefined}
    }).success(function(result){
        console.log(result);
    });


}

【讨论】：

谢谢@SharpCoder，你能解释一下你建议的答案吗？让我知道它是如何工作的。谢谢
@user1157768：之前您只发送fd 对象。现在我创建了另一个名为data 的对象。这个data 对象有两个属性fd & otherData。为此，您还必须更改服务器端代码。而不是只期望 fd 或其他对象，您将获得另一种类型的对象，该对象将同时具有 fd 和您发送的其他对象。
我认为您的问题在这里得到了回答：shazwazza.com/post/…（刚从 .Net 客户端查找有关执行此操作的信息时遇到了这个问题。）

【解决方案2】：

如果不将它们结合起来，您可以像这样收听 2 个承诺：

var promise1 = $http.post('my_url', fd, { .....

var promise2 = $http.post('my_url', {imgx: $scope.imgx, ......

$q.all([promise1,promise2]).then(function(response){ console.log(response); });

角度 $q documentation

【讨论】：

【解决方案3】：

这就是我所做的和为我工作的方式。

在前端：

return $http({
        method: 'POST',
        url: url,
        headers: { 'Content-Type': undefined },
        transformRequest: function (data) {
            var formData = new FormData();
            formData.append("name", data.name);
            for (var i = 0; i < data.files.length; i++) {
                formData.append("content", data.files[i]);
            }
            return formData;
        },
        data: { name: name, files: files }
    });

在服务器端，只是根据您使用的语言检索参数的正常方式，我使用的是NodeJS，它是这样的：

var name = req.body.name;
req.file('content').upload(...);

我引用了this。由于我的错误，我花了很多时间完成这项工作。希望这会帮助任何需要这个并记录的人。

【讨论】：