JavaScript中的File、Blob与Base64：轻松实现相互转换

引言

在Web开发中，处理文件上传、下载或文件内容展示时，经常会遇到需要将File、Blob和Base64编码之间进行转换的情况。File和Blob是Web API中用于处理二进制文件数据的对象，而Base64则是一种基于64个可打印字符来表示二进制数据的表示方法。本文将详细介绍如何在JavaScript中实现这些对象之间的转换。

1. File到Blob

File对象实际上继承自Blob对象，因此File可以视为Blob的一个特例，包含了额外的文件信息如文件名和类型。因此，将File转换为Blob实际上非常简单，几乎可以说是“转换即引用”。

示例代码：

let file = document.querySelector('input[type=file]').files[0]; // 假设已通过文件输入获取了File对象
let blob = file; // File对象直接赋值给Blob变量，因为File是Blob的子类
console.log(blob instanceof Blob); // 输出: true

2. Blob到Base64

将Blob转换为Base64编码的字符串，通常需要创建一个FileReader对象，并使用其readAsDataURL方法。readAsDataURL方法会读取Blob或File的内容，并将其作为一个表示文件内容的DataURL返回，这个DataURL的格式为data:[<mediatype>][;base64],，其中<mediatype>是文件的MIME类型，后面跟着的是Base64编码的字符串。

示例代码：

let blob = new Blob(['Hello, world!'], { type: 'text/plain' });
let reader = new FileReader();
reader.onload = function(e) {
    let base64String = e.target.result;
    console.log(base64String); // 输出类似: data:text/plain;base64,SGVsbG8sIHdvcmxkIQ==
};
reader.readAsDataURL(blob);

3. Base64到Blob

将Base64编码的字符串转换回Blob对象，需要去除DataURL的前缀部分（即data:[<mediatype>][;base64],），然后解码剩余的Base64字符串。

示例代码：

let base64String = 'data:text/plain;base64,SGVsbG8sIHdvcmxkIQ==';
let base64Content = base64String.split(',')[1]; // 去除DataURL的前缀部分
let blob = new Blob([atob(base64Content)], { type: 'text/plain' }); // 注意：atob用于解码Base64字符串
// 此时，blob就是转换后的Blob对象

4. File到Base64

由于File是Blob的子类，将File转换为Base64的过程与将Blob转换为Base64的过程相同。

示例代码（与Blob到Base64相同）：

let file = document.querySelector('input[type=file]').files[0];
let reader = new FileReader();
reader.onload = function(e) {
    let base64String = e.target.result;
    console.log(base64String);
};
reader.readAsDataURL(file);

5. Base64到File

将Base64编码的字符串直接转换为File对象稍微复杂一些，因为File对象通常与文件系统或表单上传相关联，具有文件名等额外属性。但我们可以手动构造一个Blob对象，并使用URL.createObjectURL来生成一个类似File对象的URL，尽管它不是一个真正的File对象。

示例代码（模拟过程）：
```javascript
let base64String = ‘data:text/plain;base64,SGVsbG8sIHdvcmxkIQ==’;
let blob = this.base64ToBlob(base64String, ‘text/plain’); // 假设base64ToBlob是上述Base64到Blob的转换函数
let file = new File([blob], ‘example.txt’, { type: