JS中如何将base64转换成file

 更新时间:2023年04月17日 09:36:54   作者:前端程序猿i  
这篇文章主要介绍了JS中如何将base64转换成file的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

js将base64转换成file

dataURLtoBlob(dataurl, name) {//base64转file
      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 File([u8arr], name, {
        type: mime,
      })
    },
this.dataURLtoBlob(imgDataUrl,name)//imgDataUrl是base64格式编码  name是图片名字

将Base64转file对象,将图片转Base64

//将图片转换为Base64
function getImgToBase64(url,callback){
  var canvas = document.createElement('canvas'),
    ctx = canvas.getContext('2d'),
    img = new Image;
  img.crossOrigin = 'Anonymous';
  img.onload = function(){
    canvas.height = img.height;
    canvas.width = img.width;
    ctx.drawImage(img,0,0);
    var dataURL = canvas.toDataURL('image/png');
    callback(dataURL);
    canvas = null;
  };
  img.src = url;
}
 
//将base64转换为文件对象
function dataURLtoFile(dataurl, filename) {
  var arr = dataurl.split(',');
  var mime = arr[0].match(/:(.*?);/)[1];
  var bstr = atob(arr[1]);
  var n = bstr.length; 
  var u8arr = new Uint8Array(n);
  while(n--){
      u8arr[n] = bstr.charCodeAt(n);
  }
  //转换成file对象
  return new File([u8arr], filename, {type:mime});
  //转换成成blob对象
  //return new Blob([u8arr],{type:mime});
}
//将图片转换为base64,再将base64转换成file对象
getImgToBase64('images/ruoshui.png',function(data){
   var myFile = dataURLtoFile(data,'testimgtestimgtestimg');
   console.log(myFile);
});
 
 
// 将 file 转 base64
    blobToDataURL (blob, cb) {
      const reader = new FileReader()
      reader.onload = function (evt) {
        cb(evt.target.result)
      }
      reader.readAsDataURL(blob)
    },

js图片base64转file文件两种方式

最近项目中需要实现把图片的base64编码转成file文件的功能,然后再上传至服务器。起初是直接通过new File()的方式进行转换,在各个主流的浏览器基本上都支持,Android也没问题,但是在ios系统埋了个坑,ios11.4以下的系统上传失败。

定位bug发现是new File()这个方法不兼容ios系统,只能另辟蹊径,最后找到一个方法就是:

将base64转成blob ——> blob转成file

这种方式测试通过,解决了new File()不兼容ios系统问题。

下面将base64转file文件两种方式的代码贴出来:

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

    //将base64转换为文件
    dataURLtoFile: function(dataurl, filename) { 
        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 File([u8arr], filename, { type: mime });
    },
 
 
    //调用
    var file = dataURLtoFile(base64Data, imgName);

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

    //将base64转换为blob
    dataURLtoBlob: function(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 });
    },
    //将blob转换为file
    blobToFile: function(theBlob, fileName){
       theBlob.lastModifiedDate = new Date();
       theBlob.name = fileName;
       return theBlob;
    },
    //调用
    var blob = dataURLtoBlob(base64Data);
    var file = blobToFile(blob, imgName);

目前方法二在项目中已经可以正常使用。

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 基于JS实现经典的井字棋游戏

    基于JS实现经典的井字棋游戏

    井字棋作为我们在上学时代必玩的一款连珠游戏,承载了很多人的童年记忆。本文我们就用HTML、css、js来实现一款井字棋游戏,感兴趣的可以动手尝试一下
    2022-04-04
  • Promise 链式调用原理精简示例

    Promise 链式调用原理精简示例

    这篇文章主要为大家介绍了Promise 链式调用原理精简示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12
  • 微信小程序实现播放音频

    微信小程序实现播放音频

    这篇文章主要为大家详细介绍了微信小程序实现播放音频,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-06-06
  • javascript入门之window对象【新手必看】

    javascript入门之window对象【新手必看】

    本文系统介绍了javascript的window对象以及一些控制函数的用法,仅供大家参考
    2016-11-11
  • js中的事件捕捉模型与冒泡模型实例分析

    js中的事件捕捉模型与冒泡模型实例分析

    这篇文章主要介绍了js中的事件捕捉模型与冒泡模型,实例分析了js事件的执行顺序与冒泡模型的原理,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-01-01
  • bootstrap fileinput 插件使用项目总结(经验)

    bootstrap fileinput 插件使用项目总结(经验)

    这篇文章主要介绍了bootstrap fileinput 插件使用项目总结,是小编日常碰到的问题及解决方法,需要的朋友可以参考下
    2017-02-02
  • JavaScript中如何计算字符串文本的宽度

    JavaScript中如何计算字符串文本的宽度

    这篇文章主要介绍了JavaScript中如何计算字符串文本的宽度问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-02-02
  • Typescript中将字符串转为数值的方法小结

    Typescript中将字符串转为数值的方法小结

    在TypeScript中,将字符串转换为数值(即字符串到数字的类型转换)有几种方法,本文讲给大家介绍几种常见的方法,每个方法有对应的代码示例,需要的朋友可以参考下
    2023-08-08
  • JSONP基础知识详解

    JSONP基础知识详解

    JSONP是JSON with padding(填充式JSON或参数式JSON)的简写,是应用JSON的一种新方法,常用于务器与客户端跨源通信,在后来的Web服务中非常流行。本文将详细介绍JSONP,下面跟着小编一起来看下吧
    2017-03-03
  • 详解JavaScript常量定义

    详解JavaScript常量定义

    本文主要对JavaScript常量定义进行详细介绍,具有一定的参考价值,下面跟着小编一起来看下吧
    2017-01-01

最新评论