資訊專欄INFORMATION COLUMN
摘要：一些場景，比如獲取的圖片，或者微信開發(fā)返回的圖片格式是格式的，我們需要上傳到服務(wù)器上，那就需要進(jìn)行轉(zhuǎn)化。將轉(zhuǎn)成轉(zhuǎn)構(gòu)建上傳表單可以選擇性的加入一些鑒權(quán)進(jìn)行數(shù)據(jù)上傳，我這里使用的是我已經(jīng)對進(jìn)行了封裝
一些場景，比如canvas獲取的圖片，或者微信開發(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)對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)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/109958.html
摘要：前言最近在為公司的一個比賽制作專題頁，碰到一個使用參賽者上傳的照片生成專屬海報的需求，實(shí)現(xiàn)過程中用到了一些以前沒用過的，也踩了一些坑，于是將其記錄下來。 前言 最近在為公司的一個比賽制作專題頁，碰到一個使用參賽者上傳的照片生成專屬海報的需求，實(shí)現(xiàn)過程中用到了一些以前沒用過的 api，也踩了一些坑，于是將其記錄下來。 需求描述 用戶點(diǎn)擊按鈕進(jìn)行照片上傳 照片上傳完成后，將照片進(jìn)行裁剪，...
摘要：移動端文檔富文本編輯器，支持圖文混排引用大標(biāo)題無序列表，字體顏色加粗斜體。可用于獨(dú)立項(xiàng)目開發(fā)，也可以用于與原生混合開發(fā)。，圖片文件最大尺寸限制，單位，默認(rèn)，編輯器左右內(nèi)邊距，默認(rèn)像素，是否顯示底部工具欄圖片標(biāo)簽連接添加等圖標(biāo)。 ZxEditor 移動端HTML文檔（富文本）編輯器，支持圖文混排、引用、大標(biāo)題、無序列表，字體顏色、加粗、斜體。 可用于獨(dú)立web項(xiàng)目開發(fā)，也可以用于與原生A...
閱讀 1389·2021-10-11 10:58
閱讀 1471·2021-09-04 16:41
閱讀 670·2019-08-30 15:55
閱讀 799·2019-08-29 18:46
閱讀 3133·2019-08-29 14:05
閱讀 3525·2019-08-26 14:00
閱讀 2448·2019-08-26 13:53
閱讀 3164·2019-08-26 13:29
