js：File和Base64（DataURL）互相转换

File转Base64（DataURL）

/**
 * file 转Base64 DataURL
 * @param {File} file
 * @returns
 */
function fileToBase64Async(file) {
  return new Promise((resolve, reject) => {
    let reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = (e) => {
      resolve(e.target.result);
    };
  });
}

使用

await fileToBase64Async(file)

Base64（DataURL）转 File

/**
 * 解析base64中的数据信息
 * @param {String} base64
 * @returns
 */
function parseBase64(base64) {
  let arr = base64.split(","),
    mime = arr[0].match(/:(.*?);/)[1];

  return {
    mime,
    data: arr[1],
  };
}

/**
 * base64转Uint8
 * @param {String} base64
 * @returns
 */
function base64ToUint8Array(base64) {
  let parsedBase64 = parseBase64(base64);

  let bstr = atob(parsedBase64.data);
  let n = bstr.length;
  let u8arr = new Uint8Array(n);

  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }

  return u8arr;
}

/**
 * 将base64转换为blob
 * @param {String} base64
 * @returns
 */
function base64ToBlob(base64) {
  let parsedBase64 = parseBase64(base64);
  let u8arr = base64ToUint8Array(base64);
  return new Blob([u8arr], { type: parsedBase64.mime });
}

/**
 * 将blob转换为file
 * @param {Blob} blobData
 * @returns
 */
function blobToFile(blobData) {
  let date = new Date();

  blobData.lastModifiedDate = date;
  blobData.lastModified = date.getTime();
  blobData.name = blobData.type.replace("/", ".");

  return blobData;
}

/**
 * base64 转 File
 * @param {String} base64
 * @returns
 */
function base64ToFile(base64) {
  let file = null;

  // 浏览器兼容
  if (window.File != undefined) {
    let parsedBase64 = parseBase64(base64);
    let u8arr = base64ToUint8Array(base64);
    file = new File([u8arr], parsedBase64.mime.replace("/", "."), {
      type: parsedBase64.mime,
    });
  } else {
    file = blobToFile(base64ToBlob(base64));
  }

  return file;
}

使用

base64ToFile(base64)

在线示例：https://mouday.github.io/front-end-demo/base64-file/base64-file.html

参考
js 把base64转file文件的两种方式
JS实现将文件和base64的相互转换

文章来源: pengshiyu.blog.csdn.net，作者：彭世瑜，版权归原作者所有，如需转载，请联系作者。

原文链接：pengshiyu.blog.csdn.net/article/details/126895235