JS中的Blob对象

Blob(binary large object)是计算机界通用术语之一，表示二进制大对象。在JavaScript中，Blob通常表示二进制数据，不过，它们不一定非得是大量数据，Blob也可以表示一个小型文本文件的内容。

构造函数

new Blob(array[, options])

Blob()构造函数返回一个新的Blob对象，接收一个数组和配置项作为参数

参数array是一个由ArrayBuffer、ArrayBufferView、Blob、DOMString等对象构成的数组，或者其他类似对象的混合体，它将会被放进Blob

参数options是一个可选项，它可能会指定以下两种属性：

type: 表示被放入到blob中的数组内容的MIME类型，默认值为""

endings: 表示包含结束符`\n`的字符串如何被输出。它是以下两个值中的一个："native"，代表行结束符会被更改为适合宿主操作系统文件系统的惯例；"transparent"，代表会保持blob中保存的结束符不变。默认值为"transparent"

<a href="#" id="link">hello world</a>
<script>
  var b = new Blob([link], {
    type: 'text/html'
  })
  console.log(b)
</script>

属性

Blob.size(只读):返回Blob对象中所包含数据的大小(字节)

Blob.type(只读):一个字符串，表明该Blob对象所包含数据的MIME类型。如果类型未知，则该值为空字符串

<a href="#" id="link">hello world</a>
<script>
  var b = new Blob([link], {
    type: 'text/html'
  })
  console.log(b.size, b.type) // 23 "text/html"
</script>

方法

Blob.slice([start[, end[, contentType]]])

slice()方法返回一个新的Blob对象，包含了源Blob对象中指定范围内的数据

var b = blob.slice(0,1024, "text/plain"); // Blob中前1KB的文本

Web浏览器可以将Blob存储到内存中或者磁盘上，Blob可以表示非常大的数据块(比如视频文件)，如果事先不用slice()方法将它们分割成为小数据块的话，无法存储在主内存中。正是因为Blob可以表示非常大的数据块，并且它可能需要磁盘的访问权限，所以使用它们的API是异步的(在Worker线程中有提供相应的同步版本)

文件作为Blob

在支持本地文件访问的浏览器中，<input type="file">元素上的files属性则是一个FileList对象，该对象是一个类数组对象，其元素要么是0，要么是用户选择的多个File对象，一个File对象就是一个Blob

<input type="file" id="upload" multiple>
<script>
 upload.onchange = function(e) {
   var files = e.target.files;
   for (var i = 0; i < files.length; i++) {
     var file = files[i];
     console.log(file);
   }
 }
</script>

Blob URL

创建Blob后接着就是操作Blob对象，最简单的操作方法是创建一个URL来指向新创建的Blob，然后就可以以一般的URL形式在任何地方使用该URL，比如在DOM中、样式表中、甚至可以作为XMLHttpRequest的目标

URL.createObjectURL()

使用URL.createObjectURL(blob)函数可以创建一个Blob URL，这个URL表示参数中的对象。Blob URL并不是永久有效的，它的生命周期和创建它的窗口中的document绑定，也就是说，一旦用户关闭了或者离开了包含创建Blob URL脚本的文档，该Blob URL就失效了。

<input type="file" id="upload" multiple>
<script>
upload.onchange = function(e) {
  var files = e.target.files;
  for (var i = 0; i < files.length; i++) {
    var file = files[i];
    console.log(URL.createObjectURL(file));
  }
}

如图所示，传递一个Blob给URL.createObjectURL()方法会返回一个URL(以普通字符串形式)。该URL以blob://开始，紧跟着是一小串文本字符串，该字符串用不透明的唯一标识符来标识Blob

URL.revokeObjectURL()

URL.revokeObjectURL()静态方法用来释放之前通过调用URL.createObjectURL() 创建的已经存在的URL对象。

通常，当结束使用某个Blob URL对象时，应该通过调用这个方法来让浏览器知道不再需要保持这个文件的引用了，这样可以释放该URL所占用的内存。如果不手动调用该方法，浏览器是不会回收该URL占用的内存的

URL.revokeObjectURL(objectURL);

优秀文章首发于聚享小站，欢迎关注!