上傳圖片文件轉換成blob
阿新 • • 發佈：2018-07-23
set 轉換 new obj his send 如果 文件轉換 gef 直接提交base64編碼圖片數據，過大的話後臺會出現轉發錯誤問題。
一個不錯的解決方式就是將base64編碼的圖片數據轉換為Blob（與File相似）並添加到form中提交。下面是代碼：
/**
* @param base64Codes
* 圖片的base64編碼
*/
function sumitImageFile(base64Codes){
var formData = new FormData(); //這裏連帶form裏的其他參數也一起提交了,如果不需要提交其他參數可以直接FormData無參數的構造函數
var url = "上傳url";
//convertBase64UrlToBlob函數是將base64編碼轉換為Blob
formData.append("imageName",convertBase64UrlToBlob(base64Codes)); //append函數的第一個參數是後臺獲取數據的參數名,和html標簽的input的name屬性功能相同
//ajax 提交form
if(window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else if(window.ActiveXObject) {
xmlhttp = new ActiveXObject();
}
xmlhttp.open("POST", url, true);
xmlhttp.send(formData);
xmlhttp.onload = function(e) {
if(this.status == 200) {
var obj = eval("(" + this.responseText + ")");
var re = obj["return"];
}
};
}
/**
* 將以base64的圖片url數據轉換為Blob
* @param urlData
* 用url方式表示的base64圖片數據
*/
function convertBase64UrlToBlob(urlData){
var bytes=window.atob(urlData.split(‘,‘)[1]); //去掉url的頭，並轉換為byte
//處理異常,將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);
}
return new Blob( [ab] , {type : ‘image/png‘});
}
上傳圖片文件轉換成blob