Blob 是 JavaScript 中表示不可变原始二进制数据的内置对象，用于安全高效封装文件、图片等非文本内容；其不可修改、支持 MIME 类型标记、需通过 URL.createObjectURL 或 FileReader 等桥接操作。
Blob 是 JavaScript 中用于表示不可变、原始二进制数据的内置对象，常用于处理文件、图片、音频、PDF 等非文本内容。它不直接暴露内部字节，而是提供一种安全、高效的方式封装和传递二进制数据。
Blob 的核心特点
Blob 本身不是数组或 Buffer，而是一个“数据容器”：
- 构造后不可修改（immutable）
- 支持按类型（type）标记 MIME 类型，如 "image/png" 或 "application/pdf"
- 实际数据存在浏览器内存中，不会立即解码或解析
- 可通过 URL.createObjectURL() 转为临时 URL，在 img、a、video 等标签中直接使用
如何创建 Blob 对象
常用构造方式是传入数据片段（字符串、ArrayBuffer、TypedArray、其他 Blob）和可选配置：
- 从字符串创建（注意编码）：
new Blob(["hello"], { type: "t
ext/plain" })
- 从 Uint8Array 创建（推荐处理二进制）：
new Blob([new Uint8Array([0x48, 0x65, 0x6C, 0x6C, 0x6F])], { type: "text/plain" })
- 合并多个 Blob：
new Blob([blob1, blob2, arrayBuffer])
读取和解析 Blob 中的二进制数据
Blob 不能直接 .slice() 或遍历字节，需借助 FileReader 或响应式 API：
- 用 FileReader 读为 ArrayBuffer：
fr.readAsArrayBuffer(blob) → 在 onload 中获取 fr.result（即原始字节）
- 读为 base64：
fr.readAsDataURL(blob) → 结果含前缀 "data:...;base64,..."
- 读为文本（仅适用于可编码字符）：
fr.readAsText(blob, "utf-8")
- 现代替代：用 blob.arrayBuffer()（返回 Promise）更简洁：
const buf = await blob.arrayBuffer(); const view = new Uint8Array(buf);
常见实用场景与技巧
实际开发中 Blob 常用于以下情况：
-
下载生成的文件：创建 Blob + createObjectURL + a.download
const url = URL.createObjectURL(blob); a.href = url; a.download = "report.pdf"; a.click(); URL.revokeObjectURL(url);
-
预览用户选择的图片：直接赋值给 img.src
img.src = URL.createObjectURL(fileInput.files[0]);
-
分片上传大文件：用 blob.slice(start, end) 切出小块，逐个发送
-
避免内存泄漏：用完临时 URL 后务必调用 URL.revokeObjectURL(url)
基本上就这些。Blob 不复杂但容易忽略细节——关键记住它是个“包装器”，真正操作二进制得靠 ArrayBuffer + TypedArray，而展示或传输则靠 URL 或 FileReader 桥接。
ext/plain" })