JS中怎么将base64转换成file

栏目分类：前端开发    发布日期：2023-11-22    浏览次数：340次     收藏

本篇内容主要讲解“JS中怎么将base64转换成file”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“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);

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