刚开始做表单提交图片的时候，遇到一个问题，就是如果采用前后分离的方式来做表单提交，那么这种情况下图片的上传将如何实现？
与普通的表单提交相比,调用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 用于分割不同的字段，每一段便是一项数据,数据格式如下所示
每个部分都有加上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
