对 Blob 的理解、如何创建 Blob及 Blob 的应用场景

1、什么是 Blob?

Blob 通常指的是 Binary Large Object（二进制大对象），是一种用于存储大量二进制数据的数据类型。

Blob 对象可以看做是存放二进制数据的容器

还可以通过 Blob 设置二进制数据的 MIME 类型，一个 Blob 对象就是一个包含有只读原始数据的类文件对象​。

File 接口基于 Blob，继承了 Blob 的功能，并且扩展支持了用户计算机上的本地文件 

2、如何创建 Blob? 

① 通过构造函数

var blob = new Blob(Array, opt);

② 通过 Blob.slice() 

Blob.slice(start, end, contentType)

返回一个新的 Blob 对象，​原始的 Blob 不会被改变。

包含了原 Blob 对象中指定范围内的数据。

③ 通过 canvas.toBlob()

3、实例属性 

① size

返回 Blob 或 File 的字节数

② type

包含文件 MIME 类型的字符串

4、应用场景

① 通过 Blob.slice 方法，可以实现大文件的切片上传 

② 通过 url 下载文件

window.URL 对象可以为  Blob 对象生成一个网络地址 ，结合 a 标签的 download 属性，可以实现点击 url 下载文件

  /**
   * 下载blob文件
   * @param {String} data 文件的二进制数据
   * @param {*} fileName 文件名称
   */
  static downBlobFile (data, fileName) {
    if (data == null || data === '') {
      return
    }
    if (typeof window.navigator.msSaveBlob !== 'undefined') {
      // 兼容IE10
      window.navigator.msSaveBlob(new Blob([data]), fileName)
      return
    }
    // 创建新的URL表示指定的blob对象
    const url = window.URL.createObjectURL(new Blob([data]))
    const link = document.createElement('a')
    link.style.display = 'none'
    link.href = url
    // a 标签的 download 属性是 HTML5 标准新增的
    // 作用是触发浏览器的下载操作而不是导航到下载的 url
    // 这个属性可以设置下载时使用新的文件名称。
    link.setAttribute('download', fileName)
    document.body.appendChild(link)
    // 触发下载
    link.click()
    // 下载完成移除元素
    document.body.removeChild(link)
    // 释放blob对象
    window.URL.revokeObjectURL(url)
  }

③ 通过 url 显示图片

把图片转化为 Blob 对象，生成URL（URL.createObjectURL(blob)）来显示图片

 

5、总结

Blob 对象作为一个装填二进制数据的基本对象，其作用也仅仅是一个容器。

而真正的业务功能则需要通过FileReader、URL、Canvas等对象实现。