先放一段图片格式的dataUrl示例:
const dataUrl = 'data:image/gif;base64,R01GOD1hMgAyALMKAF1dXdbW1szMzPX19aOjozM2ZmZpmZmQAAAP//WAAAAAAAAAAAAAAAAAAAACH/COSFVFNDQVBFMi4wAwEAAAAh+QQJBQAKACWAAAAAMgAyAAAESVDJSau900vNu/9gKI5kaZ5oqq5s675UAIFIMH8IXsCsncJAGKIABBsP4pgmUgsDQhdUtKsVgUAwFRh7QalP6+1h9yJrQbw7Vw9aMPspgienSvj2GQ8QZDRxQFqa2cEgoNjbnSTBQJVQedbEgZddpEHCQcCBj2RE42MjJVbjQgJoZ1UAglimnKiYk6WiUwkGmauyeoyleaiaBwgCbqgKbwaMpoqRCAW7CM1bBgABWAm81oQDtwhAylSAfWOnWcDPEgjM64DcK18JAt1XPwWmhmBGohSaIGeROBfpvq2jME fAmiCSiBYSAFIJS2ErBHbwKTjkI8gA0dEAAAh+QQJBQAKACWAAAAAMgAyAAAE4VDJSau900vNu/9gKI5kaZ5oqq5s675wLM90bd94ru98vw0+SQAACAIOiF1gOUTmCAiAMUAtIAgBGGQ6HoFhiRt6C17DzUE12weA9jscQHengXmdC9tgDis6XYABX55CTFDAH+FMEQHhXUtZI+QK3yOcgBAACAQGCmAA6+QeE4ChOKCZ5UAEAZBompNjs91wBltHCDEa/KPYIiPn17XPfWP4d+RkyBPwEEcGtWBAWId3gHdk9Ia2]FgnBNYD6FamMCBVI5hZBnbwh4jYwIAdrBgcHljVLcT2fPzy1Q6c6AKAGYQJJAAQ/SIdZBsWsT3QGPABdhsCgvI+fPNZGBFHPU10KptA4onO+CbGx2jpLSAYFxF1BAQPM4BURACH5BAkFAAOALAAAAAAAAAAAAAAAAASJUM1]q7046827/2AojmRpnmiqrmzrvnASz/Q7DLU2IACRZwBB4YCHEARMCQvBCGTUovEZΘEEAlqVRHMbgOArDZKOIi3XW81YFZHwWde6sYd011BJROYOKDDAMECEhVBEtYawAHBQZjSWAFhI+QBXNVk25NV2GUTWWFcntROwZ+hgYAOGs IBwBVN4sAAVWLB65ojgkPKSHBwJCX4cEtHgSEQAh+QQFDWAKACWAAAAAMgAyAAOFDJSau900vNu/9gKI5kaZoqq5s675wLM90bd94ru987//AoHBILBqPyKRyywhw6n9CodEqtWj8RADs='
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);
});