Blob API

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

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

基本用法

构造函数

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

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

参数

  • data:类数组类型,数组中的每一项连接起来构成 Blob 对象的数据,数组中的每项元素可以是 ArrayBufferArrayBufferViewBlobDOMString
  • 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.stringifydata4 对象转换成 JSON 的字符串
  • blob5:直接使用 data4 创建

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

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

Blob URL

Blob URL 是 Blob 协议的 URL,格式如下:

blob:http://xxx

Blobl Url:
Blob Url

Blob URL 可以通过 URL.createObjectURL(blob) 创建,在绝大部分场景下,我们可以像使用 HTTP 协议的 URL 一样,使用 Blob URL

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

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

常见的应用场景:

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

参考资料: