Blob

什么是 Blob ?Binary Large Onject。

Blob 的主要用途存储大量的二进制数据。

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

要从其他非 Blob 对象和数据构造一个 Blob,请使用 Blob() 构造函数。要创建包含另一个 Blob 数据的子集 Blob,请使用 slice() 方法。要获取用户文件系统上的文件对应的 Blob 对象,请参阅 File 文档。

接受 Blob 对象的 API 也被列在 File 文档中。

新建实例

api:

1
var instance = new Blob(blobParts[, options]);

参数解释:

  • blobParts:规定是一个包含字符串的数组,如果其中元素不是字符串,则会被强制转成字符串;
  • options
    • type:默认值为 '',代表了将会被放入到 blob 中的数组内容的 MIME 类型
    • endings:默认值为 transparent,用于指定包含行结束符\n的字符串如何被写入。 它是以下两个值中的一个: native 表示行结束符会被更改为适合宿主操作系统文件系统的换行符; transparent 表示会保持blob中保存的结束符不变

实例属性

其本身的属性有两个:分别是:sizetype

  • size:指示该 blob 对象的大小;
  • type:则指示该 blob 对象的 MIME 类型。

实例方法

在原型中有个很有用的方法:slice()。该方法在js很多对象中都有,其作用也类似,都是用来截取;Blob中的也一样,也是用来截取。

api:

1
slice([start[, end[, contentType]]])

参数 contentType 表示给新的 Blob 赋予一个新的文档类型,这将会把它的 type 属性设为被传入的值,它的默认值是一个空的字符串。

不过这里截取的是文件数据二进制字符,也相当是数据,因为二进制字符表示的就是数据本身,同时这里大家也更愿意成为切片分割,意思是把 Blob 中保存的数据分成一块一块的,大文件上传时,由于上传限制,就会有需要用到这个切片,把文件分片上传。

给个栗子:

1
2
3
4
5
6
7
var blob = new Blob(["数据"], {type: 'text/plain'}) //创建Blob对象
var read = new FileReader(); //创建读取器对象FileReader

read.readAsText(blob); //开始读取文件
read.onload = function() { //数据读完会触发onload事件
console.log(read.result); //read有个result属性存放这结果,从result获取到数据
}

使用场景

  1. 大文件分片上传
  2. Blob URL

File

File 对象是特殊类型的 Blob,且可以用在任意的 Blob 类型的 context 中。比如说, FileReader, URL.createObjectURL(), createImageBitmap(), 及 XMLHttpRequest.send() 都能处理 Blob 和 File。

参考链接