前端文件流相关概念、技术、转换、读取（分享）

1. 概念

• Blob 和 File：File 是 Blob 的子类，Blob 和 File 都是二进制数据的不可变对象，File 对象包含了文件的元数据信息，如文件名、大小、MIME 类型等。如果需要上传或下载文件，则可以使用 File 对象。而对于其他类型的二进制数据，则可以使用 Blob 对象进行处理
• Base64：Base64 编码是将二进制数据转换为 ASCII 字符的方法，可以用于在文本中传输和显示二进制数据。我们可以将一个 Blob 或 File 对象转换为 Base64 字符串，并将其嵌入到 HTML、CSS 或 JavaScript 代码中，以便在页面中正确地显示该数据
• FormData：可用于通过 AJAX 将数据发送到服务器。它可以包含多个键值对，其中每个键对应一个表单控件，每个值则对应该控件的值。在使用 FormData 对象时，我们可以使用 append() 方法将文件或其他二进制数据添加到请求中
• ArrayBuffer：用于表示通用的、固定长度的二进制数据缓冲区
• TypedArray：TypedArray 是 JavaScript 中处理二进制数据的一个主要方式。它是一种类数组对象，它可以让我们以特定的格式读取、写入和操作底层的二进制数据。每个元素在内存中都是连续存储的，并且可以使用索引访问。常见的 TypedArray 类型包括 Uint8Array、Int16Array、Float32Array 等，每种类型代表不同的二进制数据格式
• TextDecoder：用于将 ArrayBuffer 或 TypedArray 等二进制数据转换为字符串（可读文本）
• TextEncoder：用于将文本转换为 ArrayBuffer 或 TypedArray 等二进制数据

2. FileReader 读取 file 相关

通过 input:file 获取的 file 文件

2.1 读取 arrayBuffer

let file = event.target.files[0];
const reader = new FileReader();

reader.readAsArrayBuffer(file);
reader.onload = ({ target }) => {
  const arrayBuffer = target.result;
  console.log(arrayBuffer);
  console.log(new Int8Array(arrayBuffer)); // 具体看需要转哪个类型
};

2.2 读取 base64

let file = event.target.files[0];
const reader = new FileReader();

reader.readAsDataURL(file);
reader.onload = ({ target }) => {
  const base64 = target.result;
};

2.3 读取 文本

let file = event.target.files[0];
const reader = new FileReader();

reader.readAsText(file);
reader.onload = ({ target }) => {
  const text = target.result;
};

3. Blob/File

3.1 描述

• file 是 blob 的子类，Blob 对象可以包含任意类型的二进制数据，而 File 对象通常用于表示从用户计算机上选择的文件
• 如果你需要处理用户选择的文件，那么你应该使用 File 对象。如果你需要在 JavaScript 中操作和传输二进制数据，那么你应该使用 Blob 对象
• 在转换、读取时方式都差不多

3.2 构造函数

File 和 Blob 可以通过构造函数互转

/*
  File
    bits：ArrayBuffer、ArrayBufferView、Blob、String、Array 可传入类型
    name：文件名称
    options（可选）：配置
  	  type：文件类型
  	  lastModified：最后修改时间，默认为当前时间
*/
new File(bits, name[, options]);

/*
  Blob
    arr：ArrayBuffer、ArrayBufferView、Blob、String、Array 可传入类型
    options：配置
  	  type：文件类型
  	  endings：用于指定包含行结束符\n的字符串如何被写入
  	  		  native，适合宿主操作系统文件系统的换行符
  	  		  transparent，保持不变，默认是这个
*/
new Blob(arr, options);

4. base64

4.1 base64 转 blob/file

function base64ToFile(base64, fileName) {
  // 文件类型
  const type = base64.split(";")[0].split(":")[1];
  // 对 base64 进行解码
  const content = atob(base64.split(",")[1]);

  let len = content.length;
  let uint8 = new Uint8Array(len);

  let i = len;
  while (i--) {
    // 把解码的码点存储二进制数据
    uint8[i] = content.charCodeAt(i);
  }

  return new File([uint8], fileName, { type });
}

5. text

5.1 TextEncoder

let encoder = new TextEncoder()
const unit8 = encoder.encode("哈哈") // 返回一个包含 UTF-8 编码的文本的 Uint8Array

5.2 TextDecoder

// 将二进制以什么编码格式进行解码，默认 utf-8
let decoder = new TextDecoder('utf-8')
decoder.decode(unit8) // 哈哈

6. URL

6.1 URL.createObjectURL()

let url = URL.createObjectURL(Blob/File) // 此 url 可以直接在浏览器打开

6.2 URL.revokeObjectURL()

// 浏览器在 document 卸载的时候，会自动释放 url，但是为了获得最佳性能和内存使用状况，建议主动去卸载
// 卸载完成后，如果在打开 url，将不存在
URL.revokeObjectURL(url)

7. canvas

7.1 创建 canvas

// html-code <canvas></canvas>

const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");

const img = document.createElement("img");
img.src = "图片路径/base64";

// 绘制图片
img.onload = function () {
  ctx.drawImage(img, 0, 0);
};

7.2 读取 blob

/*
  type：图片格式
  quality：图片质量
*/
canvas.toBlob(
  (e) => {
    console.log(e);
  },
  type,
  quality
);

7.3 读取 base64

/*
  type：图片格式
  encoderOptions：图片质量，0/1，默认 0.92
*/
canvas.toDataURL(type, encoderOptions)