javascript的blob是什么_如何处理二进制数据?

admin 百科 7
Blob 是 JavaScript 中表示不可变原始二进制数据的内置对象,用于安全高效封装文件、图片等非文本内容;其不可修改、支持 MIME 类型标记、需通过 URL.createObjectURL 或 FileReader 等桥接操作。

javascript的blob是什么_如何处理二进制数据?-第1张图片-佛山资讯网

Blob 是 JavaScript 中用于表示不可变、原始二进制数据的内置对象,常用于处理文件、图片、音频、PDF 等非文本内容。它不直接暴露内部字节,而是提供一种安全、高效的方式封装和传递二进制数据。

Blob 的核心特点

Blob 本身不是数组或 Buffer,而是一个“数据容器”: - 构造后不可修改(immutable) - 支持按类型(type)标记 MIME 类型,如 "image/png""application/pdf" - 实际数据存在浏览器内存中,不会立即解码或解析 - 可通过 URL.createObjectURL() 转为临时 URL,在 imgavideo 等标签中直接使用

如何创建 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 常用于以下情况:

标签: javascript java 编码 浏览器 app 字节 ai pdf

发布评论 0条评论)

还木有评论哦,快来抢沙发吧~