JS中Blob对象是什么？如何操作二进制数据？

Blob 是 JavaScript 中用于安全、高效处理不可变二进制数据的核心对象，它并非真实文件，而是一个灵活的二进制容器，支持从字符串、ArrayBuffer 等多种源创建，并通过异步方法（如 text()、arrayBuffer()）读取内容；掌握其创建规范（必须传数组）、编码陷阱（UTF-8 默认限制）、内存管理（URL.createObjectURL 需配对 revoke）以及大文件流式处理技巧，是前端实现文件下载、上传、预览和高性能二进制操作的关键所在。

什么是 Blob？它不是文件，但能当文件用

Blob（Binary Large Object）是 JavaScript 中表示**不可变、原始二进制数据**的内置对象。它不等于 File，但 File 是 Blob 的子类——所以所有 File 都能当 Blob 用，反之不行。

常见误解是“Blob 就是文件”，其实它更像一个**二进制数据容器**：可以由字符串、ArrayBuffer、TypedArray 或其他 Blob 构建，但本身不绑定路径、不自动关联磁盘文件。

• 创建后不可修改（immutable），想改就得新建一个
• Blob.size 返回字节数，Blob.type 是 MIME 类型（可能为空字符串）
• 浏览器不会在内存中立即解码内容，适合处理大块数据而不阻塞主线程

怎么从字符串或 ArrayBuffer 创建 Blob？

最常用的是 new Blob() 构造函数，注意参数是**数组**，不是单个值：

const text = "Hello, 世界";
const blob1 = new Blob([text], { type: "text/plain;charset=utf-8" });

const buffer = new ArrayBuffer(8);
const view = new Uint8Array(buffer);
view[0] = 0xff;
const blob2 = new Blob([buffer], { type: "application/octet-stream" });

关键点：

• 第一个参数必须是 Array，哪怕只有一个元素也要包成 [data]
• type 只是提示，不影响内容；设错也不会报错，但可能影响后续 URL.createObjectURL() 或 FormData.append() 的行为
• 传入 TypedArray（如 Uint8Array）比传 ArrayBuffer 更安全，因为前者明确指定了字节范围

怎么读取 Blob 内容？别直接 .text() 或 .arrayBuffer() 就完事

Blob 本身没有同步读取方法，所有读取都得走异步流程，依赖 Blob.text()、Blob.arrayBuffer() 或 FileReader。其中前两个是现代推荐方式：

blob.text().then(content => {
  console.log(content); // UTF-8 解码后的字符串
});

blob.arrayBuffer().then(buf => {
  const view = new Uint8Array(buf);
  console.log(view[0]); // 第一个字节
});

容易踩的坑：

• Blob.text() 默认按 UTF-8 解码，如果 Blob 实际是 GBK/Shift-JIS 编码，会乱码——此时必须先用 arrayBuffer()，再手动用 TextDecoder 指定编码
• 大 Blob（比如几百 MB）调用 .arrayBuffer() 会复制全部数据到内存，可能触发 OOM；这时应考虑流式读取（blob.stream() + ReadableStream）
• FileReader 在老环境仍需支持，但它不支持 async/await，且事件回调里容易丢失上下文

怎么把 Blob 当文件上传或下载？绕不开 URL.createObjectURL()

前端要触发下载、预览图片、或传给 fetch / FormData，通常需要一个“临时 URL”指向 Blob：

const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = "report.pdf";
a.click();

// 用完记得释放，否则内存泄漏
URL.revokeObjectURL(url);

注意事项：

• URL.createObjectURL() 返回的 URL 是**浏览器内部引用**，只在当前文档生命周期有效；页面刷新即失效
• 必须配对调用 URL.revokeObjectURL()，尤其在频繁生成 Blob 的场景（如视频帧截图），否则内存持续增长
• 传给 fetch() 时可直接用 Blob 对象（无需转 URL），但传给 FormData.append("file", blob, "name.jpg") 才真正模拟表单文件上传

真正难处理的其实是跨域 Blob 和流式拼接——比如把多个小 Blob 合并成一个大 Blob，或者从 Response.body 流中边收边存，这些操作稍有不慎就会丢数据或卡死主线程。

终于介绍完啦！小伙伴们，这篇关于《JS中Blob对象是什么？如何操作二进制数据？》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！