前端 Blob 详解

前端 Blob 详解

1. 什么是 Blob？

Blob（Binary Large Object）表示二进制大对象，用于存储二进制数据。在前端开发中，Blob 常用于处理文件、图像、视频等二进制数据。

2. 创建 Blob

可以通过 Blob 构造函数创建 Blob 对象。

const blob = new Blob(array, options);

• array: 数组，包含要放入 Blob 的数据。可以是字符串、ArrayBuffer、ArrayBufferView、Blob 等。
• options: 可选参数，包含两个属性：
  • type: 指定 Blob 的 MIME 类型，如 'text/plain'、'image/png' 等。
  • endings: 指定行结束符的处理方式，默认为 'transparent'。

示例：

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

3. Blob 的属性和方法

• 属性:
  • size: Blob 对象的大小（字节）。
  • type: Blob 对象的 MIME 类型。

示例：

console.log(blob.size); // 13
console.log(blob.type); // 'text/plain'

• 方法:
  • slice(start, end, contentType): 返回一个新的 Blob 对象，包含原 Blob 的指定字节范围。
    • start: 起始字节（包含）。
    • end: 结束字节（不包含）。
    • contentType: 新 Blob 的 MIME 类型。

示例：

const slicedBlob = blob.slice(0, 5, "text/plain");

4. 使用 Blob

• 下载文件:
  可以通过创建 Blob URL 实现文件下载。

const link = document.createElement("a");
link.href = URL.createObjectURL(blob);
link.download = "hello.txt";
link.click();
URL.revokeObjectURL(link.href); // 释放内存

• 读取 Blob 数据:
  使用 FileReader 读取 Blob 数据。

const reader = new FileReader();
reader.onload = function (event) {
  console.log(event.target.result); // 读取的数据
};
reader.readAsText(blob); // 以文本形式读取

• 上传文件:
  通过 FormData 上传 Blob 数据。

const formData = new FormData();
formData.append("file", blob, "hello.txt");

fetch("/upload", {
  method: "POST",
  body: formData,
});

5. Blob 与 File

File 对象继承自 Blob，通常用于表示用户选择的文件。File 对象包含额外的属性如 name、lastModified 等。

示例：

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

6. 总结

Blob 是前端处理二进制数据的重要工具，广泛应用于文件操作、数据存储和网络传输等场景。通过 Blob 构造函数、FileReader 和 FormData 等 API，可以高效地操作和传输二进制数据。