JS中如何将base64转换成file
作者：前端程序猿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);目前方法二在项目中已经可以正常使用。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。