如何使用 AngularJS 上传 FormData 对象答案

【问题标题】：How to upload FormData object using AngularJS如何使用 AngularJS 上传 FormData 对象
【发布时间】：2015-11-23 11:15:23
【问题描述】：

我是 angular-js 的新手，想提交带有图像的 multipart/form-data，它的 $http.post() 方法只支持 json 格式，所以我想将 formdata 对象转换为 json 格式，

$scope.SubmitForm=function()
{
    url = siteurl + '/admin/' + $scope.module + '/add';

    var form=document.getElementById("addForm");
    var formData=new FormData(form);

    $http({
        url     :   url,
        method  :   "POST",
        data    :   formData,
    })
    .then(function(responseText) {                
        alert(JSON.stringify(responseText));

    //process data
    },function(){
        alert("hello from error");
    });

}

它对我不起作用；我尝试为此制作 json 格式数据并且工作正常

formData={
    "first_name" :  $('#first_name').val(),
    "last_name"  :  $('#last_name'),
    //....
};

但不知道将我的图像文件附加到这种格式；我应该在这里做什么才能得到我的工作。

有没有办法（函数）将formdata对象转换为json格式

【问题讨论】：

转换数据here。但是，如果您使用 Angular，为什么不使用 ng-model 呢？
感谢您的建议，但 ng-model 不适用于文件，我有新的指令可以使用，但它很麻烦，

标签： javascript json angularjs form-data

【解决方案1】：

通过在 $http 配置行中添加如下两行代码来解决（感谢大家）-

      $http({
            url     :   url,
            method  :   "POST",
            data    :   formData,
            transformRequest: angular.identity, // see the angugular js documentation
            headers : {'Content-Type':undefined}// setting content type to undefined that change the default content type of the angular js
        }).then(function(responseText){
            
            alert(JSON.stringify(responseText));
            ///$scope.tablerows=$scope.totaltablerows;
            ///$scope.searchFunction();
        },function(){
            alert("hello from error");
        });

这对我有用

【讨论】：

【解决方案2】：

在使用 Angular 表单时，您真的应该使用 ng-model（您可以在示例中提供您的表单吗？）。它创建一个范围变量以在您的控制器中使用，如果它已经定义，您将有两种方式绑定......例如，由于您的表单不存在，我会做这样的事情，这是简化的（并且未经测试)...:

<form name="myForm" ng-submit="SubmitForm()">
    Name: <input ng-model="fields.name">
    Address: <input ng-model="fields.address">
    ....
</form>

在你的 JS 控制器中...

 $scope.submitForm = function(){    
        var data = $scope.fields,
            url = '/admin/' + $scope.module + '/add'; // I assume $scope.module is available from elsewhere...  

        $http.post(url, data).then(function(resp){
        // do stuff...

        });        
    }

这里有更多信息...https://docs.angularjs.org/api/ng/directive/ngModel 和 W3schools 有一些示例：http://www.w3schools.com/angular/angular_forms.asp

【讨论】：

这不能回答 OP 的问题。

【解决方案3】：

应该是这样构造的：

  var form = document.getElementById('addForm');
  var fd = new FormData(form);
  var file = this.files[0];    
  fd.append("afile", file);
  // These way you add extra parameters
  fd.append("first_name", $('#first_name').val());
  fd.append("last_name", $('#last_name').val());

参考示例 - from github

【讨论】：