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;
};