File和base64格式转换

在前端开发中，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;
};