資訊專欄INFORMATION COLUMN
摘要：一些場景，比如獲取的圖片，或者微信開發返回的圖片格式是格式的，我們需要上傳到服務器上，那就需要進行轉化。將轉成轉構建上傳表單可以選擇性的加入一些鑒權進行數據上傳，我這里使用的是我已經對進行了封裝
一些場景，比如canvas獲取的圖片，或者微信開發sdk返回的圖片格式是data:img格式的，我們需要上傳到服務器上，那就需要進行轉化。
將dataURL轉成Blob
// base64 轉 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 });
},
構建Form上傳表單
const blob = dataURItoBlob(imgDataUrl);
const formData = new FormData();
// formData.append("auth", state.token.auth); 可以選擇性的加入一些鑒權
formData.append("file", blob);
進行數據上傳，我這里使用的是axios
const params = {
url: "/store/file",
payload: formData
};
const data = await this.upload(params);
我已經對axios進行了封裝
export const upload = (params) => {
const { url, payload } = params
return axios.post(url, payload, {
headers: {
"Content-Type": "multipart/form-data"
}
}).then(x => x.data)
}
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/109958.html
摘要：前言最近在為公司的一個比賽制作專題頁，碰到一個使用參賽者上傳的照片生成專屬海報的需求，實現過程中用到了一些以前沒用過的，也踩了一些坑，于是將其記錄下來。 前言 最近在為公司的一個比賽制作專題頁，碰到一個使用參賽者上傳的照片生成專屬海報的需求，實現過程中用到了一些以前沒用過的 api，也踩了一些坑，于是將其記錄下來。 需求描述 用戶點擊按鈕進行照片上傳 照片上傳完成后，將照片進行裁剪，...
摘要：移動端文檔富文本編輯器，支持圖文混排引用大標題無序列表，字體顏色加粗斜體。可用于獨立項目開發，也可以用于與原生混合開發。，圖片文件最大尺寸限制，單位，默認，編輯器左右內邊距，默認像素，是否顯示底部工具欄圖片標簽連接添加等圖標。 ZxEditor 移動端HTML文檔（富文本）編輯器，支持圖文混排、引用、大標題、無序列表，字體顏色、加粗、斜體。 可用于獨立web項目開發，也可以用于與原生A...
閱讀 1398·2021-10-11 10:58
閱讀 1481·2021-09-04 16:41
閱讀 679·2019-08-30 15:55
閱讀 804·2019-08-29 18:46
閱讀 3144·2019-08-29 14:05
閱讀 3531·2019-08-26 14:00
閱讀 2455·2019-08-26 13:53
閱讀 3178·2019-08-26 13:29
