哈喽雷雷 - dataurl
type: channel
link: https://www.lxtian.com/tag/dataurl/
items: dataUrl转为file对象(base64转file)

dataUrl转为file对象(base64转file)
type: item
date: 2022-04-07T16:33:00+08:00
description: 先放一段图片格式的dataUrl示例： const dataUrl = '[binary]]FgnBNYD6FamMCBVI5hZBnbwh4jYwIAdrBgcHljVLcT2fPzy1Q6c6AKAGYQJJAAQ/SIdZBsWsT3QGPABdhsCgvI+fPNZGBFHPU10KptA4onO+CbGx2jpLSAYFxF1BAQPM4BURACH5BAkFAAOALAAAAAAAAAAAAAAAAASJUM1]q7046827/2AojmRpnmiqrmzrvnASz/Q7DLU2IACRZwBB4YCHEARMCQvBCGTUovEZΘ[binary]' data:image/gif;base64,这小段是该文件类型标识 后面的就是base64了，即转换到file对象的主要内容 大致分为两个步骤👇 1、dataUrl转为blob对象 2、blob再转为file dataURLtoBlob(dataurl, fileName) { const base64 = window.atob(dataurl.split(',')[1]); // 去掉dataUrl头部，取到base64 const type = dataurl.split(',')[0].match(/:(.*?);/)[1]; // 从dataUrl头部获取文件类型 // 处理异常,将ascii码小于0的转换为大于0 const ab = new ArrayBuffer(base64.length); let ia = new Uint8Array(ab); for (let i = 0; i < base64.length; i++) { ia[i] = base64.charCodeAt(i); } const blob = new blob([ab], { type: type }); // Blob对象 const file = new File([blob], fileName + '.gif'); // file对象 return file; }, 至此file对象转换完毕 可直接传递到后端的上传接口实现上传 const file = dataURLtoBlob(dataurl, '文件名'); const formData = new FormData(); formData.append('file', file); axios({ url: 'xxx.xxx', methods: 'post', data: formData }) .then((result) => { console.log(result); });