Blob 和 File 的区别，以及 Blob、File、Base64 三种类型的相互转换

一、 Blob 和 File 的区别

Blob 和 File 都是 JavaScript 中用于处理二进制数据的对象，但它们有一些区别。

Blob
- 定义： Blob 表示不可变的、原始数据的类文件对象。它通常用于存储大块的二进制数据，比如图像、音频或视频文件等。
- 特点： Blob 对象可以包含任意类型的数据，不仅限于文本或二进制数据。它的数据是只读的，你不能直接修改 Blob 中的数据。
- 创建方式：可以通过构造函数 Blob 或 BlobBuilder 来创建 Blob 对象。
```
// 使用构造函数创建 Blob
var blob = new Blob(["Hello, World!"], { type: "text/plain" });
```
File
- 定义： File 是 Blob 的子类，通常用于表示用户选择的文件。它包含了文件的元信息，如文件名、大小、修改时间等。
- 特点：除了继承 Blob 的特性外，File 还包含文件的相关信息，例如文件名 (name)、文件的最后修改时间 (lastModifiedDate)、文件的 MIME 类型 (type) 等。
- 创建方式：通常通过用户交互选择文件，然后通过 File 构造函数创建。
```
// 通过用户选择创建 File 对象
<input type="file" id="fileInput" />
var fileInput = document.getElementById('fileInput');
var file = fileInput.files[0];
```
总结：
- Blob 是用于存储任意类型的二进制数据的对象，而 File 是 Blob 的一种特殊情况，用于表示用户选择的文件，并包含了文件的相关信息。
- Blob 通常用于一般的二进制数据存储，而 File 更适合表示文件对象。
- File 是 Blob 的扩展，因此 File 具有 Blob 的所有功能，并在此基础上添加了文件相关的元信息。

二、 Blob、File、Base64 三种类型的相互转换

File 转 Blob

const blob = new Blob([file], { type: file.type });

File/Blob 转 Base64

// 创建一个新的 FileReader 对象
const reader = new FileReader();
// 读取 File 对象
reader.readAsDataURL(file/blob);
// 加载完成后
reader.onload = () => {// 将读取的数据转换为 base64 编码的字符串const base64String = reader.result.split(',')[1];
}

Base64 转 Blob

const base64ToBlob = base64 => {let arr = base64.split(','),  // 使用逗号 , 将传入的 base64 字符串分割成一个数组。因为 base64 编码的字符串通常以 data:image/jpeg;base64, 这样的格式开头，所以这一步是为了去掉开头的部分。mime = arr[0].match(/:(.\*?);/)[1],  // 使用正则表达式从分割后的数组的第一个元素中提取 MIME 类型。例如，对于 data:image/jpeg;base64,，它将提取 image/jpegbstr = window.atob(arr[1]), // 使用 atob 方法将 base64 编码的字符串（去掉开头的部分后）解码为普通的字符串。n = bstr.length,  // 获取解码后的字符串的长度。u8arr = new Uint8Array(n);  // 创建一个新的 Uint8Array 对象，长度为解码后的字符串的长度。Uint8Array 是一个用于处理无符号 8 位整数的数组类型。while (n--) {  // 循环从最后一个字符开始，向前遍历解码后的字符串。u8arr[n] = bstr.charCodeAt(n);  // 将解码后的字符串的每个字符转换为对应的 ASCII 码值，然后存储到 u8arr 数组中。}return new Blob([u8arr], {   // 创建一个新的 Blob 对象，其中包含之前转换的二进制数据。type: mime, // 设置 Blob 对象的 MIME 类型为之前提取的类型。});
};

Base64 转 File

const base64ToFile = (base64, fileName) => {let arr = base64.split(',');let mime = arr[0].match(/:(.\*?);/)[1];let bstr = atob(arr[1]);let n = bstr.length;let u8arr = new Uint8Array(n);while (n--) {u8arr[n] = bstr.charCodeAt(n);}return new File([u8arr], fileName, {type: mime});
};