JavaScript中Blob与File对象的区别及转换详解

前言

在 JavaScript 中，Blob 实例与 File 实例均封装二进制数据，二者存在显著差异。核心对比如下：

1. Blob 实例：

• Blob 为表示不可变原始数据的类，支持任意二进制类型。
• 常用于处理文件或原始数据，涵盖图片、音频及视频等。
• Blob 可聚合多个部分，构成二进制数据集合。

创建 Blob 示例：

const blob = new Blob(["Hello, world!"], { type: "text/plain" });

主要特征：

• Blob 作为通用二进制数据容器。
• 缺乏文件相关元数据（如文件名、路径等）。
• Blob 侧重处理大数据，如服务器返回的二进制数据流。

2. File 实例：

• File 继承自 Blob，属 Blob 子类，代表用户文件。
• File 除包含 Blob 的二进制数据外，还具备文件名、路径等额外属性。
• 通常，File 通过文件选择器（<input type="file">）或拖放操作从用户系统获取。

创建 File 示例：

const file = new File(["Hello, world!"], "hello.txt", { type: "text/plain" });

主要特征：

• File 专为表示用户文件设计，具备 name（文件名）与 lastModified（最后修改时间）等额外信息。
• 常用于文件上传、下载等操作场景。
• File 实为 Blob，故可调用 Blob 上的方法（如 slice）对 File 实例进行操作。

关键区别：

总结：

• Blob 为通用二进制数据容器，不含文件元数据；File 为 Blob 扩展，代表含元数据的文件，常关联文件操作。

两个对象进行相互转换

从 Blob 转换为 File

可通过构造 File 实例将 Blob 转换为 File。File 构造函数接收三个参数：文件内容（通常为 Blob）、文件名及可选选项对象（如文件类型）。

const blob = new Blob(["Hello, world!"], { type: "text/plain" }); 
// 将 Blob 转换为 File 
const file = new File([blob], "hello.txt", { type: "text/plain" });
console.log(file); // File 对象，包含文件内容、文件名等信息

j

从 File 转换为 Blob

因 File 继承自 Blob，可直接将 File 实例视作 Blob 使用。转换无需特殊操作。若需获取 File 中的 Blob 数据，可直接引用 File 实例，或使用 File.slice() 方法创建新 Blob。

const file = new File(["Hello, world!"], "hello.txt", { type: "text/plain" });
 // File 本身就是一个 Blob，可以直接使用 
const blob = file; 

// 或者使用 slice 方法创建一个新的 Blob

 const newBlob = file.slice(0, file.size);

 console.log(blob); // Blob 对象，包含文件的二进制数据

 console.log(newBlob); // 新的 Blob 对象

总结：

• 从 Blob 转换为 File 需通过 File 构造函数，将 Blob 实例作为数据部分传入。
• 从 File 转换为 Blob 可直接使用 File 实例，因 File 本质为 Blob 子类。若需创建新 Blob，可使用 File.slice() 方法。