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: "text/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 常用于以下情况：
魔法映像企业网站管理系统
下载
技术上面应用了三层结构，AJAX框架，URL重写等基础的开发。并用了动软的代码生成器及数据访问类，加进了一些自己用到的小功能，算是整理了一些自己的操作类。系统设计上面说不出用什么模式，大体设计是后台分两级分类，设置好一级之后，再设置二级并选择栏目类型，如内容，列表，上传文件，新窗口等。这样就可以生成无限多个二级分类，也就是网站栏目。对于扩展性来说，如果有新的需求可以直接加一个栏目类型并新加功能操作
立即学习“Java免费学习笔记（深入）”；
-
下载生成的文件：创建 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 桥接。
