base64格式圖片轉換為FormData對象進行上傳

原理：利用ArrayBuffer、Blob和FormData

var base64String = /*base64圖片串*/;

//這里對base64串進行操作，去掉url頭，並轉換為byte
var bytes = window.atob(base64String.split(',')[1]);

//處理異常，將ASCII碼小於0的轉換為大於0，這里有兩種寫法
第一種：
var ab = new ArrayBuffer(bytes.length);
var ia = new Uint8Array(ab);
for(var i = 0; i < bytes.length; i++){
    ia[i] = bytes.charCodeAt(i); //這里有點疑惑，ia是怎么改變ab的？注：①
}
//Blob對象
var blob = new Blob([ab], {type: 'image/jpeg'}); //type為圖片的格式

//FormData對象
var fd = new FormData();
//TDOD Ajax或者其他方式上傳FormData對象

//FormData對象接受三個參數，第三個參數為文件名，通常我們只傳前兩個參數，第三個參數不傳則使用默認文件名，這里使用的Blob對象，所以需要一個文件名，用時間戳代替。
fd.append('file',blob, Date.now() + '.jpg');
第二種：
var array = [];
for(var i = 0; i < bytes.length; i++){
    array.push(bytes.charCodeAt(i));
}
var blob = new Blob([new Uint8Array(array)], {type: 'image/jpeg'});
var fd = new FormData();
fd.append('file',blob, Date.now() + '.jpg');
//TDOD Ajax或者其他方式上傳FormData對象

注：①這里說一下關於這個ArrayBuffer：ArrayBuffer 對象用來表示通用的、固定長度的原始二進制數據緩沖區。ArrayBuffer 不能直接操作，而是要通過類型數組對象或 DataView 對象來操作，它們會將緩沖區中的數據表示為特定的格式，並通過這些格式來讀寫緩沖區的內容（來源於MDN）。這里的類型數組對象有：Int8Array、Uint8Array、Int16Array、Uint16Array、Int32Array、Uint32Array、Float32Array、Float64Array 附圖：

DataView： MDN鏈接

那么這里就不難理解了，ArrayBuffer不能通過索引來操作自身，只能通過類型數組對象或者DataView來操作，所以這里的ia[i] = types.charCodeAt(i)就是對ArrayBuffer進行的操作，所以在 new Blob對象的時候，ab和ia是相等的了。

以上就是base64圖片通過ArrayBuffer和Blob對象轉換為FormData對象進行上傳的關鍵。