base64转file文件的两种方式

base64加载图片文件

使用base64可以不发送请求将图片文件转换为base64格式的链接渲染到图片上,减少服务器访问次数,下面是base64加载图片的方式

document.getElementById("front-file").onchange = (e) => {
  const file = e.target.files[0];
  const reader = new FileReader();
  reader.onload = () => {
    const imgURL = reader.result;
    const img = new Image();
    img.src = imgURL;
    document.getElementById("front-pic").setAttribute("src", imgURL);
  };
  reader.readAsDataURL(file);
};

base64转file文件

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

有两种方法:

1.直接通过new File()的方式进行转换
(注:new File()方法不兼容ios系统)

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