JS Blob对象详解|极客笔记

JS Blob对象详解

什么是Blob对象

Blob（Binary Large Object）对象是JavaScript中用来存储二进制数据的一种数据类型。它可以用来存储各种类型的数据，包括图片、音频、视频等。Blob对象可以通过Blob构造函数创建，并且可以通过一些方法进行操作，如读取、写入、创建URL等。

创建Blob对象

要创建一个Blob对象，可以使用Blob构造函数：

var blob = new Blob(array, options);

其中，array是一个数组，用来存储二进制数据。options是一个可选的配置对象，用来指定Blob对象的类型和编码。例如：

var blob = new Blob(['Hello, world!'], {type: 'text/plain'});

上述代码创建了一个包含文本内容”Hello, world!”的Blob对象，并指定了它的类型为纯文本（text/plain）。

Blob对象的属性和方法

Blob对象有一些属性和方法，用来获取和操作Blob数据。

属性

size：返回Blob对象的大小，单位为字节。
type：返回Blob对象的MIME类型（Multipurpose Internet Mail Extensions，多用途互联网邮件扩展类型）。

方法

slice(start?, end?, contentType?)：截取Blob对象的一部分，返回一个新的Blob对象。参数start和end用于指定截取的范围，参数contentType用于指定新Blob对象的类型。
stream()：创建一个Blob的可读流（ReadableStream）对象，用于读取Blob内容的流式操作。

下面是一些使用示例：

// 创建Blob对象
var blob = new Blob(['This is a test'], {type: 'text/plain'});

// 获取Blob对象的大小和类型
console.log(blob.size); // 输出 14
console.log(blob.type); // 输出 "text/plain"

// 截取Blob对象的一部分
var blobSlice = blob.slice(5, 8);
console.log(blobSlice.size); // 输出 3

// 创建Blob的可读流对象
var stream = blob.stream();
stream.getReader().read().then(function(data) {
  console.log(data.value); // 输出 Uint8Array [84, 104, 105, 115, 32, 105, 115, 32, 97, 32, 116, 101, 115, 116]
});

使用Blob对象

Blob对象可以用于各种用途，如下载文件、上传文件、显式图片等。

下载文件

要使用Blob对象下载文件，可以使用URL.createObjectURL方法创建一个URL，然后将该URL设置为下载链接的href属性，最后通过点击链接下载文件。

下面是一个创建并下载文本文件的示例代码：

// 创建Blob对象
var blob = new Blob(['This is a test'], {type: 'text/plain'});

// 创建下载链接
var link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = 'test.txt';

// 添加到页面并点击下载
document.body.appendChild(link);
link.click();

上传文件

在上传文件到服务器时，可以使用FormData对象将Blob对象包含在表单中一同提交。

下面是一个示例代码：

// 创建Blob对象
var blob = new Blob(['This is a test'], {type: 'text/plain'});

// 创建FormData对象
var formData = new FormData();
formData.append('file', blob, 'test.txt');

// 发送请求
var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true);
xhr.send(formData);

显示图片

可以使用Blob对象显示图片，通过将Blob对象赋值给img标签的src属性来实现。

下面是一个显示Blob对象中图片的示例代码：

// 创建Blob对象
var blob = new Blob([/* 图片数据 */], {type: 'image/png'});

// 创建img标签
var img = document.createElement('img');
img.src = URL.createObjectURL(blob);

// 添加到页面显示
document.body.appendChild(img);

运行以上示例代码后，就可以在页面上显示图片。

Blob对象与其他类型的转换

在实际开发中，有时需要将Blob对象与其他类型进行相互转换。

Blob对象转换为ArrayBuffer

可以使用FileReader对象将Blob对象转换为ArrayBuffer。

下面是一个示例代码：

// 创建Blob对象
var blob = new Blob([/* 数据 */], {type: 'application/octet-stream'});

// 创建FileReader对象
var reader = new FileReader();

// 读取Blob对象
reader.onload = function(event) {
  var arrayBuffer = event.target.result;
  console.log(arrayBuffer);
};
reader.readAsArrayBuffer(blob);

ArrayBuffer转换为Blob对象

可以使用Blob构造函数将ArrayBuffer转换为Blob对象。

下面是一个示例代码：

// 创建ArrayBuffer
var arrayBuffer = new ArrayBuffer(8);
var uint8Array = new Uint8Array(arrayBuffer);
uint8Array.set([1, 2, 3, 4, 5, 6, 7, 8]);

// 创建Blob对象
var blob = new Blob([arrayBuffer], {type: 'application/octet-stream'});
console.log(blob.size); // 输出 8