一文了解 Blob 文件格式，前端必备技能之一

最新推荐文章于 2025-08-31 11:30:00 发布

原创最新推荐文章于 2025-08-31 11:30:00 发布 · 1.2k 阅读

19 ·

CC 4.0 BY-SA版权

文章标签：

#状态模式

1. Blob 是什么？

Blob（Binary Large Object）是 JavaScript 中用于表示不可变的类文件对象，主要用于处理二进制数据。
它可以存储任意格式的数据，如图片、视频、音频、文本等。
Blob 不关心数据格式，只是一个二进制原始数据的容器。

2. Blob 的构造与属性

const blob = new Blob(arrayOfData, options);

arrayOfData：包含各种数据类型的数组（如字符串、ArrayBuffer、TypedArray 等）。
options：可选参数对象，常用属性是 type，指定 MIME 类型。

主要属性

属性	说明
`size`	Blob 对象的字节大小
`type`	Blob 的 MIME 类型字符串
`slice()`	创建 Blob 的子集

3. Blob 的常见用途

上传文件数据时，将数据封装成 Blob。
利用 Blob 生成文件下载链接，实现“前端生成文件”。
用于 canvas、音频、视频等二进制数据的处理。
WebRTC、WebSocket 传输二进制数据。

4. 如何创建 Blob 对象

4.1 通过字符串创建

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

4.2 通过 ArrayBuffer 创建

const buffer = new ArrayBuffer(8);
const blobFromBuffer = new Blob([buffer], { type: "application/octet-stream" });

5. Blob 与 File 的区别

特性	Blob	File
继承关系	Blob 是基础类	File 继承自 Blob
文件信息	无文件名、无最后修改时间	有文件名和修改时间属性
适用场景	二进制数据通用容器	用户本地文件对象

6. Blob 在前端的典型应用案例

6.1 创建可下载链接

const blob = new Blob(["Download content"], { type: "text/plain" });
const url = URL.createObjectURL(blob);

const a = document.createElement("a");
a.href = url;
a.download = "example.txt";
document.body.appendChild(a);
a.click();
URL.revokeObjectURL(url);

6.2 上传图片裁剪后的数据

canvas.toBlob((blob) => {
  // 通过 FormData 上传
  const formData = new FormData();
  formData.append('file', blob, 'cropped.png');
  fetch('/upload', { method: 'POST', body: formData });
}, 'image/png');