angular实现上传图片的数据格式

刚开始做表单提交图片的时候，遇到一个问题，就是如果采用前后分离的方式来做表单提交，那么这种情况下图片的上传将如何实现？

与普通的表单提交相比,调用angular的$http请求提交图片或文件api接口,不能仅仅通过直接在form中定义multipart／formdata的数据格式实现，而是需要结合通过异步前处理数据的方式来上传。

说到$http,你知道与jquery的ajax的区别吗？

不同点：请求数据格式不一样，即Content-Type的定义不一致

$http的contentType默认值是 application/json;charset=UTF-8;

$.ajax的contentType默认是 application/x-www-form-urlencoded; charset=UTF-8

后者默认值是application/x-www-form-unlencoded，如果你表单提交一个get请求，那么浏览器用x-www-form-urlencoded的编码方式把form数据转换成一个字串（name1=value1&name2=value2),然后用这个字串添加到url后面，用?分割，加载这个新的url，而反之如果是一个post请求，那么他会将form数据封装到http body中，发到后端处理。

前者则是application/json，则是将数据 JSON序列化后再提交给后台

相同点：两者都适用于除了type=“file”的文本提交

说到 type=“file” 以上说的那两种编码方式都不适用，适用file这种格式的数据编码类型只能用multipart／formdata来实现。

multipart／formdata这种编码类型的实现原理是将表单以控件为单位分割，他是以生成一个 boundary 用于分割不同的字段，每一段便是一项数据,数据格式如下所示

multipart／formdata数据格式例子

每个部分都有加上Content-Disposition(form-data或者file),name(控件name)等信息，并加上分割符(boundary)。

那么解释完form-data的数据格式，我们在angular上传图片要怎么实现呢？

下面是一个例子：

$http({

url:'/api/users/verify/',method:'POST',

headers: {'Content-Type':undefined},  ／／将$http默认数据格式application/x-www-form-unlencoded删除

data: {

       'id_number': $scope.kycpeople.id_number,

      'name': $scope.kycpeople.name,

      'id_photo_front': $scope.file,／／绑定文件的ng-model值

},

transformRequest:function(data, headersGetter) {

      var formData=new FormData();

      angular.forEach(data,function(value, key) {

      formData.append(key, value);

});

varheaders= headersGetter();

deleteheaders['Content-Type'];

return formData;

}}).success(function(data) {

上述代码理解起来应该不难，主要几个点

1.Angular 在发送 POST 请求的时候使用的默认 Content-Type 是 application/json，需要改为 undefined

2.transformRequest干什么用的？

transformRequest是将form-data数据化的操作，将上传前一刻的数据data，序列化成form-data的形式，具体的操作如上所示，通过创建一个FormData对象，然后遍历data的数据，并将其中的键值对append到formdata对象中去，然后发送这个对象到后台处理。这就完成了上传图片的功能

PS：Form-data的兼容性问题

FormData只兼容 IE10以上的浏览器 ，IE10以下只能通过其他方法实现，比如iframe