JavaScript的Blob

发表于 分类于 阅读次数： Valine：

原文：Blobs in JavaScript

Blob（二进制大型对象）是JavaScript中一种类似于文件的数据结构，相当于客户端的Buffer。

Blob是一个包含任意字节的对象。Blob类是浏览器File API的一部分：JavaScript的File类是Blob的子类，所以当你从<input type="file">中获取一个文件实例时，它其实也是Blob的实例。

1
2
3
4
5
const input = document.querySelector('input[type="file"]');
const file = input.files[0];

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

和FileReader一样，Blob类在各种浏览器中支持良好，但Node.js不支持。Node.js的Buffer和Blob很相似，他们都存储任意字节，但它们时完全不同的API。

Blob有一个简洁的createObjectURL()函数，经常用在预览上传图片预览。给定一个Blob，URL.createObjectURL()创建一个指向该Blob的URL，可以直接用在src或href属性中。

例如，如果你点击以下文件input，选择一张图片，你会看到选择图片的预览效果。

静态博客无法显示，请查看原文

以下是这个input的JavaScript代码，使用URL.createObjectURL()来创建一个指向上传文件的本地URL，不需要将文件真正上传到服务器。

1
2
3
4
5
6
7
8
9
10
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}" />
  `;
});

本教程对您有帮助吗？来GitHub仓库点个星支持我们吧！