在文件上传和下载时用到了多种二进制数据格式如：ArrayBuffer、Uint8Array、Blob、File等，这些数据之间很容易产生混淆，但如果我们理清了转化关系后其实也没那么复杂。

ArrayBuffer

ArrayBuffer通常用来表示一段二进制缓冲区也就是表示一段内存地址。它并不存储具体数据，只是作为数据的映射，通过用来储存音视频、文件等大媒体文件 我们可以通过以下方法手动创建，或者使用Base64或本地文件来获取缓冲区

const buffer = new ArrayBuffer(128)
console.log(buffer.byteLength) // 128

ArrayBuffer不能直接访问，也就说我们不能使用buffer[index]获取数据，要读取buffer内容必须使用TypeArray或DataView

Unit8Array

Uint8Array是TypeArray的一种，它属于TypeArray的子类，我们可以使用Uint8Array来读取buffer中的内容，如下：

const buffer = new ArrayBuffer(128)
const uint8 = new Uint8Array(buffer)
console.log(uint8.byteLenth) // 128
console.log(uint8.length) // 128

const uint32 = new Uint32Array(buffer)
console.log(uint32.byteLength) // 128
console.log(uint32.length) // 32

使用Uint8Array表示使用每子节8位来读取数据，也就是说ArrayBuffer的数据会一一对应该Uint8Array创建的数组上，同理如果使用Uint16Array或Uint32Array会将2字节、4字节对应到分别的数组上。更多TypeArray见TypeArray子类

Blob

在 JavaScript 中，Blob（Binary Large Object）对象用于表示不可变的、原始的二进制数据。它可以用来存储文件、图片、音频、视频、甚至是纯文本等各种类型的数据。Blob 提供了一种高效的方式来操作数据文件，而不需要将数据全部加载到内存中，这在处理大型文件或二进制数据时非常有用。

使用场景：

1. 生成文件下载 可以通过 Blob 创建文件并生成下载链接供用户下载文件。

onst blob = new Blob(["This is a test file."], { type: "text/plain" });
const url = URL.createObjectURL(blob); // 创建一个 Blob URL
const a = document.createElement("a");
a.href = url;
a.download = "test.txt";
a.click();
URL.revokeObjectURL(url); // 释放 URL 对象

2. 上传文件 可以通过 FormData 对象将 Blob 作为文件上传到服务器

const formData = new FormData();
formData.append("file", blob, "example.txt");

fetch("/upload", {
  method: "POST",
  body: formData,
}).then((response) => {
  console.log("File uploaded successfully");
});

3. 读取图片或文件 通过 FileReader API 可以将 Blob 对象读取为不同的数据格式。举例来说，你可以将 Blob 读取为图片并显示在页面上

File

File 是 JavaScript 中代表文件的数据结构，它继承自Blob对象，包含文件的元数据（如文件名、文件大小、类型等）。File 对象通常由用户通过<input type="file">选择文件时创建，也可以使用 JavaScript 构造函数手动创建。 File 对象继承了 Blob 对象的方法，因此可以使用一些 Blob 对象的方法来处理文件数据。 ile 是 Blob 的子类，File 对象除了具有 Blob 的所有属性和方法之外，还包含文件的元数据，如文件名和修改日期。

你可以将 File 对象看作是带有文件信息的 Blob。