17370845950

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 常用于以下情况：

• 下载生成的文件：创建 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 桥接。