Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of "how to convert front-end files data:image and data url files into Blob upload backend". Xiaobian shows you the operation process through practical cases. The operation method is simple, fast and practical. I hope this article "how to convert front-end files data:image and data url files into Blob upload backend" can help you solve the problem.

Some scenes, such as images obtained by canvas, or images returned by WeChat development sdk format is data:img format, we need to upload to the server, then we need to convert.

Convert dataURL to Blob

// base64 CONVERT BLOBDATAURItoBlob(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);进行数据上传，我这里使用的是axiosconst 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)} The content of "how to convert front-end file data:image and data url file into Blob upload backend" is introduced here. Thank you for reading. If you want to know more about industry-related knowledge, you can pay attention to the industry information channel. Xiaobian will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.