剛開始做表單提交圖片的時候，遇到一個問題，就是如果采用前后分離的方式來做表單提交，那么這種情況下圖片的上傳將如何實現？
與普通的表單提交相比,調用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
