在前端开发中,Base64编码和File对象是处理文件数据时经常使用的两种方式。Base64编码常用于将二进制数据转换为文本格式,便于在网络中传输。而File对象则提供了处理用户上传文件的接口。本文将深入探讨这两种数据格式之间的转换
基本概念与作用说明
Base64编码
Base64编码是一种将二进制数据转换成ASCII字符串的方法,使得数据能够在不支持二进制数据的环境中传输。通常用于邮件附件、嵌入图像到HTML文档、或者在网络上传输二进制数据。
File对象
File对象代表文件系统中的文件,它包含了文件的基本信息(如文件名、类型)以及文件数据。在Web应用程序中,用户可以选择文件并通过FileReader API读取文件内容。
相互转换的意义
在前端开发中,我们经常需要将用户上传的文件转换为Base64编码以便在网络中传输,或者将Base64编码的数据转换回File对象以方便进一步处理(如下载、预览等)。了解这些转换方法对于前端开发者来说是非常重要的。
base64转file
/**
* base64转file
* @param { base64 } base64
* @param { string } filename 转换后的文件名
* @return {{}} file
*/
export const base64ToFile = (base64, filename )=> {
let arr = base64.split(',');
let mime = arr[0].match(/:(.*?);/)[1];
let suffix = mime.split('/')[1] ;// 图片后缀
let bstr = atob(arr[1]);
let n = bstr.length;
let u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
return new File([u8arr], `${filename}.${suffix}`, { type: mime })
};
file转base64
/**
* file转base64
* @param { * } file 图片文件
* @return {base64}
*/
export const fileToBase64 = file => {
let reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function (e) {
return e.target.result
};
};
base64转blob, blob转file
/**
* base64转blob
* @param { base64 } base64
* @return {blob}
*/
export const base64ToBlob = base64 => {
let arr = base64.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
* @param { blob } blob
* @param { string } fileName
* @return {blob}
*/
export const blobToFile = (blob, fileName) => {
blob.lastModifiedDate = new Date();
blob.name = fileName;
return blob;
};