- 將base64格式的圖片處理為Blob對(duì)象假栓。
// base64 轉(zhuǎn)為Blob
function base64ToBlob(base64Data) {
const dataArr = base64Data.split(','); // 根據(jù),來分隔
// 獲取文件類型。使用正則捕獲 image/jpeg
const imageType = dataArr[0].match(/:(.*?);/)[1];
// 使用atob() 將base64 轉(zhuǎn)為文本文件
const textData = window.atob(dataArr[1]);
// 創(chuàng)建一個(gè)二進(jìn)制數(shù)據(jù)緩沖區(qū)霍掺，可以理解為一個(gè)數(shù)組
const arrayBuffer = new ArrayBuffer(textData.length);
// 創(chuàng)建一個(gè)類型化數(shù)組對(duì)象匾荆，可以理解為上面的數(shù)組的成員，給這個(gè)對(duì)象賦值就會(huì)放到上面的數(shù)組中杆烁。
const uint8Array = new Uint8Array(arrayBuffer);
for (let i = 0; i < textData.length; i++) {
uint8Array[i] = textData.charCodeAt(i); // 將文本文件轉(zhuǎn)為UTF-16的ASCII, 放到類型化數(shù)組對(duì)象中
}
// 返回兩個(gè)值牙丽，一個(gè)Blob對(duì)象，一個(gè)圖片格式（如jpeg）
return [new Blob([arrayBuffer], {type: imageType}), imageType.slice(6)];
}
- 將Blob對(duì)象添加到formData對(duì)象中兔魂。
// 轉(zhuǎn)為formData
function toFormData(base64Data) {
const [imageBlob, imageType] = base64ToBlob(base64Data); // 獲取處理好的Blob 和文件類型
const formData = new FormData();
formData.append('file', imageBlob, `${Date.now()}.${imageType}`); // 添加到表單烤芦，傳入文件名
return formData;
}
- http請(qǐng)求頭設(shè)置為context-type: multipart/form-data上送到文件服務(wù)器。
// 上傳到照片服務(wù)器
export default function upload(base64Data) {
const formData = toFormData(base64Data);
return new Promise((resolve, reject) => {
httpRequest(formData).then((res: any) => {
resolve(res.data)
}).catch((err) => {
reject(err);
});
});
}
原文鏈接：https://blog.csdn.net/yuan0209/article/details/135423698
