文件格式转换

file、base64 相互转换

/**
 * file 转为 base64
 */
function fileToBase64(file) {
  return new Promise((resolve, reject) => {
    ///FileReader类就是专门用来读文件的
    const reader = new FileReader();
    //开始读文件
    //readAsDataURL: dataurl 它的本质就是图片的二进制数据， 进行base64加密后形成的一个字符串，
    reader.readAsDataURL(file);
    // 成功和失败返回对应的信息，reader.result一个base64，可以直接使用
    reader.onload = () => resolve(reader.result);
    // 失败返回失败的信息
    reader.onerror = (error) => reject(error);
  });
}

/**
 * Base64 转为 File
 */
function base64toFile(base64Data, fileName) {
  let data = base64Data.split(","),
    mime = data[0].match(/:(.*?);/)[1],
    byteString = atob(data[1]),
    byteLength = byteString.length,
    uInt8Array = new Uint8Array(byteLength);
  while (n--) {
    uInt8Array[n] = byteString.charCodeAt(n);
  }
  return new File([uInt8Array], fileName, { type: mime });
}

File、Blob 相互转换

/**
 * Blob 转为 File
 */
function blobToFile(blob, fileName) {
  blob.lastModifiedDate = new Date();
  blob.name = fileName;
  return blob;
}

/**
 * File 转为 Blob
 */
function fileToBlob(file) {
  // 创建 FileReader 对象
  let reader = new FileReader();

  return new Promise((resolve) => {
    // FileReader 添加 load 事件
    reader.addEventListener("load", (e) => {
      let blob;
      if (typeof e.target.result === "object") {
        blob = new Blob([e.target.result]);
      } else {
        blob = e.target.result;
      }
      console.log(Object.prototype.toString.call(blob));
      resolve(blob);
    });

    // FileReader 以 ArrayBuffer 格式 读取 File 对象中数据
    reader.readAsArrayBuffer(file);
  });
}

base64、Blob 相互转换

/**
 * Base64 转为 Blob
 */
function baseURLtoBlob(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 转为 Base64
 */
function blobToBase64(blob, callback) {
  let reader = new FileReader();
  reader.readAsDataURL(blob);
  reader.onload = function (e) {
    callback(e.target.result);
  };
}

ArrayBuffer、File 相互转换

/**
 * ArrayBuffer 转为 File
 */
function bufferToFile(buffer, filename) {
  return new File([buffer], filename);
}

/**
 * Blob 转为 ArrayBuffer
 */
function fileToBuffer(file, cb) {
  let fr = new FileReader();
  let filename = file.name;
  fr.readAsArrayBuffer(file);
  fr.addEventListener(
    "loadend",
    (e) => {
      let buffer = e.target.result;
      cb(buffer, filename);
    },
    false
  );
}

ArrayBuffer、base64 相互转换

/**
 * ArrayBuffer 转为 base64
 */
function bufferToBase64(buffer) {
  return "data:image/jpeg;base64," + window.btoa(String.fromCharCode(...new Uint8Array(buffer)));
}

/**
 * base64 转为 ArrayBuffer
 */
function base64ToBuffer(base64) {
  let binary_string = window.atob(base64);
  let len = binary_string.length;
  let bytes = new Uint8Array(len);
  for (let i = 0; i < len; i++) {
    bytes[i] = binary_string.charCodeAt(i);
  }
  return bytes.buffer;
}

ArrayBuffer、Blob 相互转换

/**
 * ArrayBuffer 转为 Blob
 */
function bufferToBlob(buffer, mimeType = "") {
  return new Blob([buffer], { type: mimeType });
}

/**
 * Blob 转为 ArrayBuffer
 */
function blobToBuffer(blob, cb) {
  let fr = new FileReader();
  let type = blob.type;
  fr.readAsArrayBuffer(blob);
  fr.addEventListener(
    "loadend",
    (e) => {
      let buffer = e.target.result;
      cb(buffer, type);
    },
    false
  );
}

Blob 的应用

1. 大文件分割
   slice() 方法接受三个参数，起始偏移量，结束偏移量，还有可选的 mime 类型。如果 mime 类型，没有设置，那么新的 Blob 对象的 mime 类型和父级一样。
2. 当要上传大文件的时候，此方法非常有用，可以将大文件分割分段，然后各自上传，因为分割之后的 Blob 对象和原始的是独立存在的。
   不过目前浏览器实现此方法还没有统一，火狐使用的是 mozSlice() ，Chrome 使用的是 webkitSlice()，其他浏览器则正常的方式 slice() 。

// 兼容各浏览器的写法
function sliceBlob(blob, start, end, type) {
  type = type || blob.type;
  if (blob.mozSlice) {
    return blob.mozSlice(start, end, type);
  } else if (blob.webkitSlice) {
    return blob.webkitSlice(start, end, type);
  } else {
    throw new Error("This doesn't work!");
  }
}