Blob对象是什么？JS如何处理二进制数据？

从现在开始，努力学习吧！本文《Blob对象是什么？如何用JS处理二进制数据？》主要讲解了等等相关知识点，我会在golang学习网中持续更新相关的系列文章，欢迎大家关注并积极留言建议。下面就先一起来看一下本篇正文内容吧，希望能帮到你！

Blob 是 JavaScript 中表示不可变原始二进制数据的内置对象，是二进制数据容器，可由字符串、ArrayBuffer 等创建，File 是其子类；需用 new Blob([data]) 构造，读取依赖异步方法如 text() 或 arrayBuffer()，下载时常用 URL.createObjectURL() 生成临时链接。

什么是 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 流中边收边存，这些操作稍有不慎就会丢数据或卡死主线程。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《Blob对象是什么？JS如何处理二进制数据？》文章吧，也可关注golang学习网公众号了解相关技术文章。