前端base64转file文件方法

前端base64转file文件方法

背景

有这样一种场景，比如canvas截取部分dom作为图片，上传到服务器，而canvas截取的图片返回的是base64字符串，而服务器接收的是file文件。因此我们需要将base64字符串转成file文件，存储到服务器中。

解决办法

1. 方法一：通过new File()，将base64直接转成file文件。 （此方法需要考虑浏览器兼容问题）

// 第一个参数dataUrl是一个base64的字符串。第二个参数是文件名可以随意命名functionbase64toFile(dataurl, filename ='file'){let arr = dataurl.split(',');let mime = arr[0].match(/:(.*?);/)[1];// suffix是该文件的后缀let suffix = mime.split('/')[1];// atob 对经过 base-64 编码的字符串进行解码let bstr =atob(arr[1]);// n 是解码后的长度let n = bstr.length;// Uint8Array 数组类型表示一个 8 位无符号整型数组 初始值都是 数子0let u8arr =newUint8Array(n);// charCodeAt() 方法可返回指定位置的字符的 Unicode 编码。这个返回值是 0 - 65535 之间的整数while(n--){
    u8arr[n]= bstr.charCodeAt(n);}// new File返回File对象 第一个参数是 ArraryBuffer 或 Bolb 或Arrary 第二个参数是文件名// 第三个参数是 要放到文件中的内容的 MIME 类型returnnewFile([u8arr],`${filename}.${suffix}`,{type: mime,});}

1. 方法二：先将base64转换成blob，再将blob转换成file文件，此方法不存在浏览器不兼容问题

//1,先将base64转换为blobfunctiondataURLtoBlob(dataurl){var arr = dataurl.split(','),
  mime = arr[0].match(/:(.*?);/)[1],
  bstr =atob(arr[1]),
  n = bstr.length,
  u8arr =newUint8Array(n);while(n--){
    u8arr[n]= bstr.charCodeAt(n);}returnnewBlob([u8arr],{type: mime });}//2,再将blob转换为filefunctionblobToFile(theBlob, fileName){
  theBlob.lastModifiedDate =newDate();// 文件最后的修改日期
  theBlob.name = fileName;// 文件名returnnewFile([theBlob], fileName,{type: theBlob.type,lastModified: Date.now()});}// 使用示例functionbase64toFile(file){// 1.先转为 blob格式  file.content是此文件的base64格式 let blob =this.dataURLtoBlob(file.content);// 拿到文件名let fileName = file.file.name;// 2，在转为 file类型let file1 =this.blobToFile(blob,fileName);
  console.log("file1:",file1);// 3,上传...}

文章参考

https://blog.csdn.net/qq_43886365/article/details/126729188