js中关于Blob对象的介绍与使用

什么是 Blob 对象

Blob 对象是 JavaScript 中的一个标准对象，它代表了一段二进制数据。通常我们会用它来存储二进制文件，比如图片、视频、音频等等。

在 JavaScript 中，我们可以使用 Blob 构造函数来创建一个 Blob 对象。它接受一个数组作为参数，数组元素可以是字符串、 ArrayBuffer 对象（用于表示二进制数据） 或 Blob 对象。这些数组元素会被拼接起来，形成一个完整的二进制数据块，并被包裹在一个 Blob 对象中。

Blob 对象的常用方法和属性

Blob 对象的几个重要属性和方法如下：

• size 属性：表示 Blob 对象的数据大小，单位是字节。
• type 属性：表示 Blob 对象的 MIME 类型（Multipurpose Internet Mail Extensions，多用途互联网邮件扩展类型）。MIME 类型通常用来表示 Web 服务器返回的文件的内容类型（例如文本、HTML、CSS、JavaScript、JSON、XML、图片、视频、音频等等）。
• slice() 方法：用于截取 Blob 对象的一部分，并返回一个新的 Blob 对象。它接受两个参数，第一个参数是截取的起始位置，第二个参数是截取的结束位置（注意不包括结束位置）。如果只传入一个参数，默认截取到 Blob 对象的末尾。

如何使用 Blob 对象

1. Blob 对象的基本使用

// 创建一个 ArrayBuffer 对象
const arrayBuffer = new Uint8Array([72, 101, 108, 108, 111, 44, 32, 87, 111, 114, 108, 100]).buffer;

// 创建一个 Blob 对象
const blob = new Blob([arrayBuffer], { type: 'text/plain' });

// 打印 Blob 对象的大小和 MIME 类型
console.log(blob.size); // 12
console.log(blob.type); // "text/plain"

// 读取 Blob 对象中的内容
const reader = new FileReader();
reader.onload = () => {
  console.log(reader.result); // "Hello, World"
};
reader.readAsText(blob);

2. Blob 对象的二进制上传

可以利用 XMLHttpRequest 对象发起一个 POST 请求，将 Blob 对象作为请求体进行上传。这种方法适用于将文件上传到远程服务器，或将文件上传到云存储服务（如阿里云 OSS、腾讯云 COS 等）。

// 创建一个 ArrayBuffer 对象
const arrayBuffer = new Uint8Array([255, 216, 255, 224, 0, 16, 74, 70, 73, 70, 0, 1]).buffer;

// 创建一个 Blob 对象
const blob = new Blob([arrayBuffer], { type: 'image/jpeg' });

// 发起 POST 请求，将 Blob 对象上传到远程服务器
const xhr = new XMLHttpRequest();
xhr.open('POST', 'https://example.com/upload');
xhr.setRequestHeader('Content-Type', 'application/octet-stream');
xhr.send(blob);

在上面的例子中，我们将一个 JPEG 图片的二进制数据存储到一个 ArrayBuffer 对象中，然后创建了一个 MIME 类型为 image/jpeg 的 Blob 对象，并使用 XMLHttpRequest 对象将该 Blob 对象上传到了 https://example.com/upload 地址。需要注意的是，为了让服务器正确解析我们上传的数据，我们需要设置请求头的 Content-Type 为 application/octet-stream，表示这个请求体是一个字节流。