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() 方法。