JavaScript 中的 Blob 介绍

Question

Blob 是包含任意字节的对象，Blob 类是 文件 API 的一部分：JavaScript File 类是 Blob，因此当您从 <input type="file">，这是一个实例 Blob。

const input = document.querySelector('input[type="file"]');
const file = input.files[0];

file instanceof File; // true
file instanceof Blob; // true

就像 FileReader ， Blob class 在不同的浏览器中得到很好的支持，但在 Node.js 不支持，但是 Node.js 中的 缓冲区 类似于 blob，因为它们存储任意字节，但它们具有完全独立的 API。

Blob 数据 URL

Blobs 有一个整洁 createObjectUrl() 功能，常用于预览上传图片，给定一个 blob 的地址， URL.createObjectURL() 为该 blob 创建一个 URL，您可以将其与属性一起使用，例如 src 或者 href。

例如如果您单击下面的文件输入并选择一个图像，您将看到所选图像的预览。

下面是支持上述输入的 JavaScript。 它用 URL.createObjectURL() 为上传的文件创建本地 URL，而无需实际将文件上传到服务器。

const input = document.querySelector('#data-url-example');

input.addEventListener('change', () => {
  const file = input.files[0];
  const url = URL.createObjectURL(file);

  document.querySelector('#data-url-container').innerHTML = `
    <img src="${url}" />
  `;
});