Codes►前端

Blob

Blob

Blob

在JavaScript中，Blob（Binary Large Object）是一个用于表示不可变二进制数据的对象。它通常用于处理文件、图片、音频、视频等二进制内容，也可以用于在客户端生成文件并触发下载。

1. 创建 Blob

你可以通过 Blob 构造函数创建一个 Blob 对象。构造函数接受两个参数：

  • parts：一个数组，包含需要组合成 Blob 的数据。数据可以是字符串、ArrayBuffer、BufferSource 或其他 Blob 对象。
  • options：一个可选对象，用于指定 Blob 的类型（type）和其他属性。

示例：

1
2
3
4
const text = "Hello, world!";
const blob = new Blob([text], { type: "text/plain" });
console.log(blob.size); // 输出 Blob 的大小
console.log(blob.type); // 输出 Blob 的 MIME 类型

如果你需要创建一个图片文件：

1
const imageBlob = new Blob([arrayBufferData], { type: "image/png" });

2. 使用 Blob

Blob 对象通常用于以下场景：

a. 文件下载

你可以通过创建一个 URL 并触发下载来使用 Blob：

1
2
3
4
5
6
7
const blob = new Blob(["Hello, world!"], { type: "text/plain" });
const url = URL.createObjectURL(blob); // 创建一个指向 Blob 的 URL
const a = document.createElement("a");
a.href = url;
a.download = "hello.txt";
a.click();
URL.revokeObjectURL(url); // 释放 URL

b. 文件上传

在前端，你可以将 Blob 对象放入 FormData 中，然后通过 AJAX 上传到服务器：

1
2
3
4
5
6
const formData = new FormData();
formData.append("file", blob, "filename.txt");
fetch("https://example.com/upload", {
  method: "POST",
  body: formData
});

c. 读取 Blob 数据

如果你需要读取 Blob 的内容，可以使用 FileReader：

1
2
3
4
5
const reader = new FileReader();
reader.onload = function (event) {
  console.log(event.target.result); // 输出 Blob 的内容
};
reader.readAsText(blob); // 读取 Blob 为文本

3. Blob 的特点

  • 不可变：Blob 对象是不可变的，一旦创建，其内容不能被修改。
  • 灵活：可以包含多种类型的数据，支持多种 MIME 类型。
  • 高效：适合处理大文件，因为它不会将整个文件内容加载到内存中。

4. 与 File 的关系

File 是 Blob 的一个子类，专门用于表示文件系统中的文件。File 对象继承了 Blob 的所有属性和方法，并额外添加了 name 和 lastModified 属性。

示例：

1
2
3
4
5
const fileInput = document.querySelector("input[type='file']");
fileInput.addEventListener("change", function (event) {
  const file = event.target.files[0];
  console.log(file instanceof Blob); // true
});

总结

Blob 是一个非常强大的工具，用于处理二进制数据和文件操作。它在前端开发中非常常用，尤其是在文件上传、下载、图片处理等场景中。