剛開始做表單提交圖片的時(shí)候督赤，遇到一個問題陕凹，就是如果采用前后分離的方式來做表單提交树碱，那么這種情況下圖片的上傳將如何實(shí)現(xiàn)？
與普通的表單提交相比,調(diào)用angular的$http請求提交圖片或文件api接口,不能僅僅通過直接在form中定義multipart／formdata的數(shù)據(jù)格式實(shí)現(xiàn)音比，而是需要結(jié)合通過異步前處理數(shù)據(jù)的方式來上傳。
說到$http,你知道與jquery的ajax的區(qū)別嗎？
不同點(diǎn)：請求數(shù)據(jù)格式不一樣没卸，即Content-Type的定義不一致
$http的contentType默認(rèn)值是 application/json;charset=UTF-8;
$.ajax的contentType默認(rèn)是 application/x-www-form-urlencoded; charset=UTF-8
后者默認(rèn)值是application/x-www-form-unlencoded佑女，如果你表單提交一個get請求赎婚，那么瀏覽器用x-www-form-urlencoded的編碼方式把form數(shù)據(jù)轉(zhuǎn)換成一個字串（name1=value1&name2=value2),然后用這個字串添加到url后面说庭，用?分割，加載這個新的url对省，而反之如果是一個post請求蝗拿，那么他會將form數(shù)據(jù)封裝到http body中，發(fā)到后端處理蒿涎。
前者則是application/json哀托，則是將數(shù)據(jù) JSON序列化后再提交給后臺
相同點(diǎn)：兩者都適用于除了type=“file”的文本提交
說到 type=“file” 以上說的那兩種編碼方式都不適用，適用file這種格式的數(shù)據(jù)編碼類型只能用multipart／formdata來實(shí)現(xiàn)劳秋。
multipart／formdata這種編碼類型的實(shí)現(xiàn)原理是將表單以控件為單位分割仓手，他是以生成一個 boundary 用于分割不同的字段胖齐，每一段便是一項(xiàng)數(shù)據(jù),數(shù)據(jù)格式如下所示
每個部分都有加上Content-Disposition(form-data或者file),name(控件name)等信息，并加上分割符(boundary)嗽冒。
那么解釋完form-data的數(shù)據(jù)格式呀伙，我們在angular上傳圖片要怎么實(shí)現(xiàn)呢？
下面是一個例子：
$http({
url:'/api/users/verify/',method:'POST',
headers: {'Content-Type':undefined},? ／／將$http默認(rèn)數(shù)據(jù)格式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) {
上述代碼理解起來應(yīng)該不難添坊，主要幾個點(diǎn)
1.Angular 在發(fā)送 POST 請求的時(shí)候使用的默認(rèn) Content-Type 是 application/json剿另，需要改為 undefined
2.transformRequest干什么用的？
transformRequest是將form-data數(shù)據(jù)化的操作贬蛙，將上傳前一刻的數(shù)據(jù)data雨女，序列化成form-data的形式，具體的操作如上所示阳准，通過創(chuàng)建一個FormData對象氛堕，然后遍歷data的數(shù)據(jù)，并將其中的鍵值對append到formdata對象中去野蝇，然后發(fā)送這個對象到后臺處理讼稚。這就完成了上傳圖片的功能
PS：Form-data的兼容性問題
FormData只兼容 IE10以上的瀏覽器 ，IE10以下只能通過其他方法實(shí)現(xiàn)绕沈，比如iframe
