返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JS中将图片base64转file文件的两种方式
  • 399
分享到

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

js图片base64转file文件jsbase64转file 2023-02-17 12:02:48 399人浏览 安东尼
摘要

目录1.通过new File()将base64转换成file文件,此方式需考虑浏览器兼容问题2.先将base64转换成blob,再将blob转换成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,上传...
    },

打印结果如下:

在这里插入图片描述

到此这篇关于js中图片base64转file文件的两种方式的文章就介绍到这了,更多相关js 图片base64转file文件内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: JS中将图片base64转file文件的两种方式

本文链接: https://lsjlt.com/news/196568.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作