base64、file和blob用JS进行互转的方法大全【前端】
前言: 作为前端项目开发,经常会遇到图片文件的处理,下面总结一下关于 Base64、File对象和Blob 的相互转换大全。让我们一起学习吧!
1. file 对象转 base64
/**
* file 对象转 base64
* @param file
* @param callback
*/
export const fileToBase64 = (file, callback) => {
const fileReader = new FileReader();
fileReader.readAsDataURL(file);
fileReader.onload = function () {
callback(this.result);
};
};
2. base64 直接转换为 file
/**
* base64 转换为 file
* 先将base64转换成blob,再将blob转换成file文件,此方法不存在浏览器不兼容问题
* @param base64Url
* @param filename
* @returns
*/
export const base64UrlToFile = (base64Url, filename) => {
// 获取到base64编码
const arr = base64Url.split(',');
const mime = arr[0].match(/:(.*?);/)[1];
// 将base64编码转为字符串
const bstr = atob(arr[1]);
let n = bstr.length;
// 创建初始化为0的,包含length个元素的无符号整型数组
const u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], filename, { type: mime });
};
3. base64 转换成 blob
/**
* base64 转换成 blob
* @param dataUrl
* @returns
*/
export const dataURLtoBlob = dataUrl => {
const arr = dataUrl.split(',');
const mime = arr[0].match(/:(.*?);/)[1];
const bstr = atob(arr[1]);
let n = bstr.length;
const u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], { type: mime });
};
4. blob 转换为 file
/**
* blob 转换为 file
* @param blobObj
* @param fileName
* @returns
*/
export const blobToFile = (blobObj, fileName) => {
blobObj.lastModifiedDate = new Date(); // 文件最后的修改日期
blobObj.name = fileName; // 文件名
return new File([blobObj], fileName, { type: blobObj.type, lastModified: Date.now() });
};
5. base64 转 file 对象【仅思路步骤,实质同上的直转一样】
/**
* base64 转换成 blob
* @param dataUrl
* @returns
*/
export const dataURLtoBlob = dataUrl => {
const arr = dataUrl.split(',');
const mime = arr[0].match(/:(.*?);/)[1];
const bstr = atob(arr[1]);
let n = bstr.length;
const u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], { type: mime });
};
/**
* blob 转换为 file
* @param blobObj
* @param fileName
* @returns
*/
export const blobToFile = (blobObj, fileName) => {
blobObj.lastModifiedDate = new Date(); // 文件最后的修改日期
blobObj.name = fileName; // 文件名
return new File([blobObj], fileName, { type: blobObj.type, lastModified: Date.now() });
};
/**
* base64 转 file 对象
* // 先将base64转换成blob,再将blob转换成file文件,此方法不存在浏览器不兼容问题
* @param dataUrl
* @param fileName
* @returns
*/
export const base64ToFile = (dataUrl, fileName) => {
const theBlob = dataURLtoBlob(dataUrl);
return blobToFile(theBlob, fileName);
};