◀

Blob API

Blob（Binary Large Object）对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取，也可以转换成 ReadableStream 来用于数据操作。

Blob 表示的不一定是 JavaScript 原生格式的数据。File 接口基于 Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。

基本用法

构造函数

可以通过 Blob 的构造函数创建 Blob 对象：

const blob = new Blob(data [, options]);

参数

  • data：类数组类型，数组中的每一项连接起来构成 Blob 对象的数据，数组中的每项元素可以是 ArrayBuffer、ArrayBufferView、Blob、DOMString
  • options：可选项，字典格式类型，可以指定如下两个属性
    • type：默认值为空字符串 ''，它代表了将会被放入到 Blob 中的数组内容的 MIME 类型
    • endings：默认值为 transparent，用于指定包含行结束符 \n 的字符串如何被写入。 它是以下两个值中的一个：
      • native，表示行结束符会被更改为适合宿主操作系统文件系统的换行符
      • transparent，表示会保持 Blob 中保存的结束符不变

属性和方法

属性

属性 说明
Blob.size （只读）Blob 对象的大小（单位：字节）
Blob.type （只读）Blob 对象的 MIME 类型，如果是未知，则是空字符串

方法

属性 说明
Blob.slice([start [, end [, contentType]]]) 返回源 Blob 对象指定范围的新 Blob 对象
Blob.stream() 返回能读取 Blob 对象内容的 ReadableStream
Blob.text() 返回 Promise 且包含 Blob 所有内容的 UTF-8 格式的 USVString
Blob.arrayBuffer() 返回 Promise 且包含 Blob 所有内容二进制格式的 ArrayBuffer

与 ArrayBuffer 的关系

相同点：Blob 和 ArrayBuffer 都是二进制的容器

  • ArrayBuffer：ArrayBuffer 更加底层，就是一段纯粹的内存上的二进制数据，我们可以对其任何一个字节进行单独的修改，也可以根据我们的需要以我们制定的形式读取指定范围的数据
  • Blob：Blob 就是将一段二进制数据做了一个封装，我们拿到的就是一个整体，可以看到它的整体属性大小、类型；也可以对其分割，但不能了解到它的细节

联系：Blob 可以接受一个 ArrayBuffer 作为参数生成一个 Blob 对象，此行为就相当于对 ArrayBuffer 数据做一个封装，之后就是以整体的形式展现了

应用上的区别：由于 ArrayBuffer 和 Blob 的特性，Blob 作为一个整体文件，适合用于传输；而只有需要关注细节（比如修改某段数据时），才需要用到 ArrayBuffer

应用示例

  • 文件下载：通过 URL.createObjectURL(blob) 生成 Blob URL，赋给 a.download 属性
  • 图片显示：通过 URL.createObjectURL(blob) 生成 Blob URL，赋给 img.src 属性
  • 资源分段上传：通过 Blob.slice 可以分割二进制数据为子 Blob 上传
  • 本地读取文件：FileReader 的 API 可以将 Blob 或 File 转化为文本/ArrayBuffer/Data URL 等类型

代码示例

const data1 = 'a';
const data2 = 'b';
const data3 = '<div style="color: red;">This is a blob</div>';
const data4 = { name: 'abc' };

const blob1 = new Blob([data1]);
const blob2 = new Blob([data1, data2]);
const blob3 = new Blob([data3]);
const blob4 = new Blob([JSON.stringify(data4)]);
const blob5 = new Blob([data4]);
const blob6 = new Blob([data3, data4]);

console.log(blob1);
// Blob { size: 1, type: "" }
console.log(blob2);
// Blob { size: 2, type: "" }
console.log(blob3);
// Blob { size: 44, type: "" }
console.log(blob4);
// Blob { size: 14, type: "" }
console.log(blob5);
// Blob { size: 15, type: "" }
console.log(blob6);
// Blob { size: 59, type: "" }
  • blob4：通过 JSON.stringify 把 data4 对象转换成 JSON 的字符串
  • blob5：直接使用 data4 创建

实际上，当使用普通对象创建 Blob 对象时，相当于调用了普通对象的 toString 方法得到字符串数据，然后再创建 Blob 对象。

所以 blob5 保存的数据是 "[object Object]"，是 15 个字节（不包含最外层的引号）。

Blob URL

Blob URL 是 Blob 协议的 URL，格式如下：

blob:http://xxx

<br />

<code src="../../../example/binary-data/blob-url/index.tsx" />

和冗长的 Base64 格式的 Data URL 相比，Blob URL 的长度显然不能够存储足够的信息，这也就意味着它只是类似于一个浏览器内部的 引用。

从这个角度来看，Blob URL 是 浏览器自行制定的伪协议。

常见的应用场景：

  • 作为文件的下载地址
  • 作为图片资源地址
  • 本地视频文件上传前播放器的预览地址

参考资料：