Blob对象的使用方法

前端小工
163 阅读3分钟

网络浏览器实现了一个Blob 对象，它负责保存数据。

Blob的意思是 "二进制大对象"，它是一整块字节的不透明表示。

Blobs有很多用途。

它们可以从网络上的内容创建。它们可以被保存到磁盘，或从磁盘中读取。它们是在 API中使用的底层数据结构。 File例如，在FileReader API中使用。

一个blob可以在 网络工作者和iFrames之间使用 渠道信息传递API的方式在iFrames和iFrames之间发送，而从服务器到客户端则使用 推送API.

Blobs也可以使用URL进行引用。

你可以提取存储在 blob 中的文本（或字节），blob 甚至可以直接存储在 IndexedDB 中，并且也可以从那里检索。

参见我的IndexedDB 教程

Blobs是一个需要了解的基本数据类型。

一个blob可以被创建。

  • 使用Blob() 构造函数
  • 使用Blob.slice() 实例方法，从另一个blob中创建。

构造函数接收一个数组的值。即使你只有一个字符串要放在blob中，你也必须把它包在一个数组中。

例子。

const data = new Blob(['Test'])

你不需要放一个字符串值。你可以传递

Blob构造函数需要一个可选的第二个参数，它代表MIME类型。

const data = new Blob(['Test'], { type: 'text/plain' })

一旦你有了Blob对象,你可以访问它的2个属性:

  • size 返回blob内容的长度（字节）。
  • type 与它相关的MIME类型

并可以调用其唯一的方法，slice() 。

当你调用slice() ，你可以检索到blob的一部分。

这是一个从aBlob 的第10到20字节创建一个新blob的例子。

const partialBlob = aBlob.slice(10, 20);

上传一个blob

这段代码是作为输入类型或拖放的回调使用的。我们使用XHR将一个blob加载到一个url，使用f 函数来跟踪进度。

const uploadBlob = (url, blob, trackProgress) => {
	const xhr = new XMLHttpRequest()
	xhr.open('POST', url)
	xhr.send(blob)
	xhr.upload.onprogress = trackProgress
}

以blob的形式从互联网上下载数据

我们可以从互联网上下载数据并使用这种语法将其存储到Blob对象中。

const downloadBlob = (url, callback) => {
	const xhr = new XMLHttpRequest()
	xhr.open('GET', url)
	xhr.responseType = 'blob'

	xhr.onload = () => {
    callback(xhr.response)
	}

	xhr.send(null)
}

Blob URLs

我提到过，Blob也可以用URL来引用。

Blob URL是由浏览器生成的，属于内部引用。给定一个Blob，你可以使用URL.createObjectURL() 函数生成一个URL，指向它。

Blob URL以blob:// 方案开始。

一旦浏览器看到该URL，就会为存储在内存或磁盘中的相应blob提供服务。

Blob URL与数据URL（以data: 开始）不同，因为它们不在URL中存储数据。它们也不同于文件URL(以file: 开始)，因为它们不会泄露文件路径等敏感信息。

如果你访问一个已经不存在的Blob URL，你会从浏览器中得到一个404错误。

一旦你生成了一个Blob URL，你可以删除它，调用URL.revokeObjectURL() ，并传递URL。

示例在页面上从本地磁盘加载一个文件，并获得

在这个示例代码中，我们有一个input 元素来选择一个图像。一旦选择了图片，我们就删除输入元素并显示图片。一旦显示完图片，我们也会清除blob。

<input type="file" allow="image/*"  />

const input = document.querySelector('input')

input.addEventListener('change', e => {
	const img = document.createElement('img')
	const imageBlob = URL.createObjectURL(input.files[0])
	img.src = imageBlob

	img.onload = function() {
	  URL.revokeObjectURL(imageBlob)
	}

	input.parentNode.replaceChild(img, input)
})

从blob中读取数据

你不能直接访问blob中的数据。

要做到这一点，我们必须使用一个FileReader对象。

avatar
文章
阅读
粉丝