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);
标签:文件,arr,base64,blob,file,bstr,new
From: https://www.cnblogs.com/ZerlinM/p/18168055