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

原创

彭世瑜 2022-09-17 00:41:02 ©著作权

文章标签 javascript 前端开发语言 sed github 文章分类 前端开发

©著作权归作者所有：来自51CTO博客作者彭世瑜的原创作品，请联系作者获取转载授权，否则将追究法律责任

File转Base64（DataURL）

/**
 * file 转Base64 DataURL
 * @param {File} file
 * @returns
 */
function fileToBase64Async(file) {
  return new Promise((resolve,) => {
    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;
}