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" });
关键点:
立即学习“Java免费学习笔记(深入)”;
- 第一个参数必须是
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 流中边收边存,这些操作稍有不慎就会丢数据或卡死主线程。










