資訊專(zhuān)欄INFORMATION COLUMN
摘要：一些場(chǎng)景，比如獲取的圖片，或者微信開(kāi)發(fā)返回的圖片格式是格式的，我們需要上傳到服務(wù)器上，那就需要進(jìn)行轉(zhuǎn)化。將轉(zhuǎn)成轉(zhuǎn)構(gòu)建上傳表單可以選擇性的加入一些鑒權(quán)進(jìn)行數(shù)據(jù)上傳，我這里使用的是我已經(jīng)對(duì)進(jìn)行了封裝
一些場(chǎng)景，比如canvas獲取的圖片，或者微信開(kāi)發(fā)sdk返回的圖片格式是data:img格式的，我們需要上傳到服務(wù)器上，那就需要進(jìn)行轉(zhuǎn)化。
將dataURL轉(zhuǎn)成Blob
// base64 轉(zhuǎn) blob
dataURItoBlob(dataURI) {
// convert base64/URLEncoded data component to raw binary data held in a string
let byteString;
if (dataURI.split(",")[0].indexOf("base64") >= 0) {
byteString = atob(dataURI.split(",")[1]);
} else byteString = unescape(dataURI.split(",")[1]);
// separate out the mime component
const mimeString = dataURI
.split(",")[0]
.split(":")[1]
.split(";")[0];
// write the bytes of the string to a typed array
const ia = new Uint8Array(byteString.length);
for (let i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
return new Blob([ia], { type: mimeString });
},
構(gòu)建Form上傳表單
const blob = dataURItoBlob(imgDataUrl);
const formData = new FormData();
// formData.append("auth", state.token.auth); 可以選擇性的加入一些鑒權(quán)
formData.append("file", blob);
進(jìn)行數(shù)據(jù)上傳，我這里使用的是axios
const params = {
url: "/store/file",
payload: formData
};
const data = await this.upload(params);
我已經(jīng)對(duì)axios進(jìn)行了封裝
export const upload = (params) => {
const { url, payload } = params
return axios.post(url, payload, {
headers: {
"Content-Type": "multipart/form-data"
}
}).then(x => x.data)
}
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/109958.html
摘要：前言最近在為公司的一個(gè)比賽制作專(zhuān)題頁(yè)，碰到一個(gè)使用參賽者上傳的照片生成專(zhuān)屬海報(bào)的需求，實(shí)現(xiàn)過(guò)程中用到了一些以前沒(méi)用過(guò)的，也踩了一些坑，于是將其記錄下來(lái)。 前言 最近在為公司的一個(gè)比賽制作專(zhuān)題頁(yè)，碰到一個(gè)使用參賽者上傳的照片生成專(zhuān)屬海報(bào)的需求，實(shí)現(xiàn)過(guò)程中用到了一些以前沒(méi)用過(guò)的 api，也踩了一些坑，于是將其記錄下來(lái)。 需求描述 用戶(hù)點(diǎn)擊按鈕進(jìn)行照片上傳 照片上傳完成后，將照片進(jìn)行裁剪，...
摘要：移動(dòng)端文檔富文本編輯器，支持圖文混排引用大標(biāo)題無(wú)序列表，字體顏色加粗斜體?？捎糜讵?dú)立項(xiàng)目開(kāi)發(fā)，也可以用于與原生混合開(kāi)發(fā)。，圖片文件最大尺寸限制，單位，默認(rèn)，編輯器左右內(nèi)邊距，默認(rèn)像素，是否顯示底部工具欄圖片標(biāo)簽連接添加等圖標(biāo)。 ZxEditor 移動(dòng)端HTML文檔（富文本）編輯器，支持圖文混排、引用、大標(biāo)題、無(wú)序列表，字體顏色、加粗、斜體。 可用于獨(dú)立web項(xiàng)目開(kāi)發(fā)，也可以用于與原生A...
閱讀 1558·2021-10-11 10:58
閱讀 1569·2021-09-04 16:41
閱讀 803·2019-08-30 15:55
閱讀 868·2019-08-29 18:46
閱讀 3219·2019-08-29 14:05
閱讀 3626·2019-08-26 14:00
閱讀 2542·2019-08-26 13:53
閱讀 3387·2019-08-26 13:29
