JS中的Blob对象

Javascript
前端
Publish Date:   2021-06-05
Word Count:   2.4k

在一般的 Web 开发中，很少会用到 Blob，但 Blob 可以满足一些场景下的特殊需求。Blob，Binary Large Object 的缩写，代表二进制类型的大对象。Blob 的概念在一些数据库中有使用到，例如，MYSQL 中的 BLOB 类型就表示二进制数据的容器。在 Web 中，Blob 类型的对象表示不可变的类似文件对象的原始数据，通俗点说，就是 Blob 对象是二进制数据，但它是类似文件对象的二进制数据，因此可以像操作 File 对象一样操作 Blob 对象，实际上，File 继承自 Blob。

Blob 基本用法

创建

可以通过 Blob 的构造函数创建 Blob 对象：
Blob(blobParts[, options])
参数说明：

  • blobParts： 数组类型， 数组中的每一项连接起来构成 Blob 对象的数据，数组中的每项元素可以是 ArrayBuffer(二进制数据缓冲区), ArrayBufferView,Blob,DOMString。或其他类似对象的混合体。

  • options： 可选项，字典格式类型，可以指定如下两个属性：

    • type，默认值为””，它代表了将会被放入到 blob 中的数组内容的 MIME 类型。
    • endings， 默认值为”transparent”，用于指定包含行结束符\n 的字符串如何被写入。 它是以下两个值中的一个： “native”，表示行结束符会被更改为适合宿主操作系统文件系统的换行符； “transparent”，表示会保持 blob 中保存的结束符不变。

举个栗子：

var data1 = 'a'
var data2 = 'b'
var data3 = "<div style='color:red;'>This is a blob</div>"
var data4 = { name: 'abc' }

var blob1 = new Blob([data1])
var blob2 = new Blob([data1, data2])
var blob3 = new Blob([data3])
var blob4 = new Blob([JSON.stringify(data4)])
var blob5 = new Blob([data4])
var 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: ""}

size 代表 Blob 对象中所包含数据的字节数。这里要注意，使用字符串和普通对象创建 Blob 时的不同，blob4 使用通过 JSON.stringify 把 data4 对象转换成 json 字符串，blob5 则直接使用 data4 创建，两个对象的 size 分别为 14 和 15。blob4 的 size 等于 14 很容易理解，因为 JSON.stringify(data4)的结果为："{"name":"abc"}"，正好 14 个字节(不包含最外层的引号)。blob5 的 size 等于 15 是如何计算而来的呢？实际上，当使用普通对象创建 Blob 对象时，相当于调用了普通对象的 toString()方法得到字符串数据，然后再创建 Blob 对象。所以，blob5 保存的数据是"[object Object]"，是 15 个字节(不包含最外层的引号)。

slice 方法
Blob 对象有一个 slice 方法，返回一个新的 Blob 对象，包含了源 Blob 对象中制定范围内的数据。
参数说明：

  • start： 可选，代表 Blob 里的下标，表示第一个会被会被拷贝进新的 Blob 的字节的起始位置。如果传入的是一个负数，那么这个偏移量将会从数据的末尾从后到前开始计算。

  • end： 可选，代表的是 Blob 的一个下标，这个下标-1 的对应的字节将会是被拷贝进新的 Blob 的最后一个字节。如果你传入了一个负数，那么这个偏移量将会从数据的末尾从后到前开始计算。

  • contentType： 可选，给新的 Blob 赋予一个新的文档类型。这将会把它的 type 属性设为被传入的值。它的默认值是一个空的字符串。
    举个栗子：

var data = 'abcdef'
var blob1 = new Blob([data])
var blob2 = blob1.slice(0, 3)

console.log(blob1) //输出：Blob {size: 6, type: ""}
console.log(blob2) //输出：Blob {size: 3, type: ""}

通过 slice 方法，从 blob1 中创建出一个新的 blob 对象，size 等于 3。

Blob 对象能够添加到表单中，作为上传数据使用

const content = '<a id="a"><b id="b">hey!</b></a>'
const blob = new Blob([content], { type: 'text/xml' })

formData.append('webmasterfile', blob)

Blob 使用场景

分片上传

前面已经说过，File 继承字 Blob，因此我们可以调用 slice 方法对大文件进行分片上传。代码：

function uploadFile(file) {
var chunkSize = 1024 \* 1024; //每片 1M 大小
var totalSize = file.size;
var chunkQuantity = Math.ceil(totalSize/chunkSize); //分片总数
var offset = 0; //偏移量

var reader = new FileReader();
reader.onload = function(e) {
var xhr = new XMLHttpRequest();
xhr.open("POST", url);
xhr.overrideMineType("application/octet-stream");

    xhr.onreadstatechange = function() {
      if(xhr.readyState === 4 && xhr.status ===200) {
        ++offset;
        if(offset === chunkQuantity) {
          alerrt("上传完成");
        } else if(offset === chunckQuantity-1) {
          blob = file.slice(offset*chunkSize, totalSize);
          reader.readAsBinaryString(blob);
        } else {
          blob = file.slice(offset*chunkSize, (offset+1)*chunckSize);
          reader.readAsBinaryString(blob);
        }
      }else {
        alert("上传出错")；
      }
    }

    if(xhr.sendAsBinary) {
      xhr.sendAsBinary(e.target.result);
    } else {
      xhr.send(e.target.result);
    }

}
var blob = file.slice(0, chunkSize);
reader.readAsBinaryString(blob);
}

这段代码还可以进一步丰富，比如显示当前上传进度，使用多个 XMLHttpRequest 对象并行上传对象（需要传递分片数据得位置参数给服务器端）等。

Blob URL

Blob URL 是 blob 协议得 URL，它的格式如下：
blob:http://xxx
Blob URL 可以通过 URL.createObjectURL(blob)创建。在绝大部分场景下，我们可以像使用 Http 协议得 URL 一样使用 Blob URL。常见得场景有： 作为文件得下载地址和作为图片资源地址。

  • 文件下载地址
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Blob Test</title>
    <script>
      function createDownloadFile() {
        var content = 'Blob Data'
        var blob = new Blob([content])
        var link = document.getElementsByTagName('a')[0]
        link.download = 'file'
        link.href = URL.createObjectURL(blob)
      }
      window.onload = createDownloadFile
    </script>
  </head>

  <body>
    <a>下载</a>
  </body>
</html>

点击下载按钮，浏览器将会下载一个名为 file 得文件，文件得内容是：Blob Data。通过 Blob 对象，我们在前端代码中就可以动态生成文件，提供 给浏览器下载。打开 Chrome 浏览器调试窗口，在 Elements 标签下可以看到生成得 Blob URL：

  • 图片资源地址
    为图片文件创建一个 Blob URL，赋值给标签：
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Blob Test</title>
    <script>
      function handleFile(e) {
        var file = e.files[0]
        var blob = URL.createObjectURL(file)
        var img = document.getElementsByTagName('img')[0]
        img.src = blob
        img.onload = function (e) {
          URL.revokeObjectURL(this.src) //释放createObjectURL创建得对象
        }
      }
    </script>
  </head>

  <body>
    <input type="file" accept="image/*" onchange="handleFile(this)" />
    <br />
    <img style="width: 200px; height: 200px" />
  </body>
</html>

在 Network 标签栏，发现这个 Blob URL 得请求信息：
blob:http://127.0.0.1:5500/c5dd80af-00e5-4859-877d-e6aa9861bcd0
而且每次刷新页面，后面的 id? 值都会跟着变。
这个请求信息和我们平常使用 Http URL 获取得图片几乎完全一样。

window.URL.revokeObjectURL()

在每次调用 createObjectURL()方法时，都会创建一个新的 URL 对象，即使你已经用相同的对象作为参数创建过。当不再需要这些 URL 对象时，每个对象必须通过调用 URL.revokeObjectURL()方法来释放。浏览器会在文档退出时自动释放它们，但是为了获得最佳性能和内存使用状况，你应该在安全的时机主动释放掉它们。
window.URL.revokeObjectURL(objectURL);

  • 我们还可以使用 Data URL 加载图片资源：
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Blob Test</title>
  <script>
    function handleFile(e) {
      var file = e.files[0];
      var fileReader = new FileReader();
      var img = document.getElementsByTagName("img")[0];
      fileReader.onload = function(e) {
        img.src = e.target.result;
      }
      fileReader.readAsDataURL(file);
    }
  </script>
</head>

<body>
  <input type="file" accept="image/*" onchange="handleFile(this)" />
  </br>
  <img style="width:200px;height:200px;">
</body>

</html>

Data URL 对大家来说并不陌生，Web 性能优化有一项措施：把小图片用 base64 编码直接嵌入到 HTML 文件中，实际就是利用了 Data URL 来获取图片数据。

Blob URL 和 Data URL 的区别

  • blob 显示的形式 blob:域名/e61c67e3-df3a-453a-8f41-df740c1f5faf ，dataURL 的显示形式 data:image/jpeg;base64,/9j/4AAQ…
  • Blob URL 的长度一般比较短，但 Data URL 因为直接存储图片 base64 编码后的数据，往往很长，浏览器在显示 Data URL 时使用了省略号（…）。当显式大图片时，使用 Blob URL 能获取更好的可能性。
  • Blob URL 可以方便的使用 XMLHttpRequest 获取源数据（xhr.responseType = ‘blob’）。对于 Data URL，并不是所有浏览器都支持通过 XMLHttpRequest 获取源数据的
var blobUrl = URL.createObjectURL(new Blob(['Test'], { type: 'text/plain' }))
var xhr = new XMLHttpRequest()
//如果是指 xhr.responseType = 'blob',将返回一个 Blob 对象，而不是文本；
//xhr.responseType = 'blob';
xhr.onload = function () {
  alert(xhr.responseText)
}
xhr.open('get', blobUrl)
xhr.send()
  • Blob URL 只能在当前应用内部使用，把 Blob URL 复制到其他浏览器的地址栏中，是无法获取数据的。Data URL 相比之下，就有很好的移植性，你可以在任意浏览器中使用。
  • Blob URL 除了可以用作图片资源的网络地址，也可以用作其他资源的网络地址，例如 html 文件、json 文件等，为了保证浏览器能正确的解析 Blob URL 返回的文件类型，需要在创建 Blob 对象时指定相应的 type。
//创建 HTML 文件的 Blob URL
var data = "<div style='color:red;'This is a blob</div>"
var blob = new Blob([data], { type: 'text/html' }) // 'application/json'
var blobUrl = URL.createObjectURL(blob)
Author: Eric
Link: https://dono118.github.io/2021/06/05/js-zhong-de-blob-dui-xiang/
Reprint policy: All articles in this blog are used except for special statements CC BY 4.0 reprint policy. If reproduced, please indicate source Eric !
Javascript
赏
  TOC