前端base64转file文件方法

解决办法

  1. 方法一:通过new File(),将base64直接转成file文件。 (此方法需要考虑浏览器兼容问题)
// 第一个参数dataUrl是一个base64的字符串。第二个参数是文件名可以随意命名
function 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文件,此方法不存在浏览器不兼容问题

//1,先将base64转换为blob
function 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
function blobToFile(theBlob, fileName){
  theBlob.lastModifiedDate = new Date();  // 文件最后的修改日期
  theBlob.name = fileName;                // 文件名
  return new File([theBlob], fileName, {type: theBlob.type, lastModified: Date.now()});
}

// 使用示例
function base64toFile(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,上传...
}

本资源由随笔博客发布。发布者:五维国度,转载请注明出处:http://blog.suibi.site/archives/4507


本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

(0)
上一篇 2024年 5月 20日 下午2:14
下一篇 2023年 6月 28日 下午5:02

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

联系我们

在线咨询: QQ交谈

邮件:jctestxcx@163.com

关注微信