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 |
相同点:Blob 和 ArrayBuffer 都是二进制的容器
联系: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:http://xxx
Blob URL 可以通过 URL.createObjectURL(blob) 创建,在绝大部分场景下,我们可以像使用 HTTP 协议的 URL 一样,使用 Blob URL
和冗长的 Base64 格式的 Data URL 相比,Blob URL 的长度显然不能够存储足够的信息,这也就意味着它只是类似于一个浏览器内部的 引用。
从这个角度来看,Blob URL 是 浏览器自行制定的伪协议。
常见的应用场景:
参考资料: