JS中将图片base64转file文件的两种方式

最近项目中需要实现把图片的base64编码转成file文件的功能，然后再上传至服务器。

1.通过new File()将base64转换成file文件，此方式需考虑浏览器兼容问题

=====================1,把base64编码转为文件对象==========================
第一个参数dataUrl是一个base64的字符串。第二个参数是文件名可以随意命名
   funtion base64toFile(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 位无符号整型数组 初始值都是 数子0
     let u8arr = new Uint8Array(n);
     // charCodeAt() 方法可返回指定位置的字符的 Unicode 编码。这个返回值是 0 - 65535 之间的整数
     while (n--) {
       u8arr[n] = bstr.charCodeAt(n);
     }
     // new File返回File对象 第一个参数是 ArraryBuffer 或 Bolb 或Arrary 第二个参数是文件名
     // 第三个参数是 要放到文件中的内容的 MIME 类型
     return new File([u8arr], `${filename}.${suffix}`, {
       type: mime,
     });
   },

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

methods:{
//1,先将base64转换为blob
   dataURLtoBlob(dataurl) {
     var arr = dataurl.split(','),
       mime = arr[0].match(/:(.*?);/)[1],
       bstr = atob(arr[1]),
       n = bstr.length,
       u8arr = new Uint8Array(n);
     while (n--) {
       u8arr[n] = bstr.charCodeAt(n);
     }
     return new Blob([u8arr], { type: mime });
   },
   //2,再将blob转换为file
   blobToFile(theBlob, fileName){
      theBlob.lastModifiedDate = new Date();  // 文件最后的修改日期
      theBlob.name = fileName;                // 文件名
      return new File([theBlob], fileName, {type: theBlob.type, lastModified: Date.now()});
   },

}

vue中配合vant的uploader上传组件使用案例：

/* 单个文件上传案例 */
   afterRead(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