Blob的基本用法

最新推荐文章于 2025-07-08 10:13:20 发布

原创最新推荐文章于 2025-07-08 10:13:20 发布 · 1.6k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端

前端专栏收录该内容

13 篇文章

订阅专栏

一、概念：

Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取，也可以转换成 ReadableStream 来用于数据操作。

Blob 表示的不一定是 JavaScript 原生格式的数据。File 接口基于 Blob，继承了 blob 的功能并将其扩展以支持用户系统上的文件。

二、创造Blob：

要从其他非 blob 对象和数据构造一个 Blob，请使用 Blob() 构造函数。要创建一个 blob 数据的子集 blob，请使用 slice() 方法。

三、构造函数：

Blob()

返回一个新创建的 Blob 对象，其内容由参数中给定的数组拼接组成。

构造函数语法：

Blob 构造函数的语法如下：

new Blob(array, options);

参数说明：

array (必需)：
```
const data = new Blob(["Hello, world!"], { type: 'text/plain' });
```
- 这是一个包含一系列数据源的数组。数据源可以是字符串、ArrayBuffer、Uint8Array、Blob 或其他支持数据流的对象。
- 例如，可以将文本字符串、二进制数据或现有的 Blob 对象作为数组元素传递。
options (可选)：
示例：
```
const data = new Blob(["Hello, world!"], { type: 'text/plain', endings: 'native' });
```
- 这是一个对象，提供关于 Blob 的附加选项，常见的属性如下：
- type：表示 Blob 的 MIME 类型，通常是一个字符串。例如 'text/plain'、'image/png' 等。

endings：这个属性决定字符串中的换行符的行为。它可以是以下之一：

'transparent'：表示换行符会保留原样，不会被转换（默认）。
'native'：表示使用操作系统本地的换行符（例如，在 Windows 上是 \r\n，在 Linux 上是 \n）。

举例说明：

创建一个包含文本的 Blob：
```
const blob = new Blob(["This is some text"], { type: "text/plain" });
```
这里，array 包含了一个文本字符串 "This is some text"，type 为 text/plain，表示这个 Blob 是纯文本。

创建一个包含多个部分的 Blob：

const part1 = new Blob(["Hello"], { type: "text/plain" });
const part2 = new Blob([" World!"], { type: "text/plain" });
const combined = new Blob([part1, part2], { type: "text/plain" });

在这个例子中，combined 是由两个 Blob（part1 和 part2）合并而成的。

结论：

Blob的构造函数接受两个参数：

array: 一个包含二进制数据的数组，支持多种数据类型。
options (可选): 一个配置对象，允许指定 Blob 的类型和其他细节。

四、实例属性：

Blob.size 只读

Blob 对象中所包含数据的大小（字节）。

Blob.type 只读

一个字符串，表明该 Blob 对象所包含数据的 MIME 类型。如果类型未知，则该值为空字符串。

Blob.type

在Web开发中，Blob 对象用于表示不可变的原始数据的类文件对象。Blob 可以包含不同类型的文件数据，Blob 对象有一个重要的属性：type，它表示数据的 MIME 类型（也称为媒体类型）。

Blob 的 type 值通常用于标识数据的格式或类型。以下是一些常见的 type 值：

常见的 `Blob` `type` 值：

图片类型

image/jpeg：JPEG 图片。

image/png：PNG 图片。

image/gif：GIF 图片。

image/webp：WEBP 图片。

image/svg+xml：SVG 矢量图。
音频类型

audio/mpeg：MP3 音频文件。

audio/wav：WAV 音频文件。

audio/ogg：OGG 音频文件。

audio/mp4：MP4 音频文件。

audio/webm：WEBM 音频文件。
视频类型

video/mp4：MP4 视频文件。

video/webm：WEBM 视频文件。

video/ogg：OGG 视频文件。
文档类型
- application/pdf：PDF 文档。
- application/msword：Microsoft Word 文档。
- application/vnd.openxmlformats-officedocument.wordprocessingml.document：Microsoft Word (.docx) 文档。
- application/vnd.ms-excel：Microsoft Excel 文件。
- application/vnd.openxmlformats-officedocument.spreadsheetml.sheet：Microsoft Excel (.xlsx) 文件。
- application/zip：ZIP 压缩文件。
文本类型

text/plain：纯文本文件。

text/html：HTML 文件。

text/css：CSS 文件。

text/javascript：JavaScript 文件。

text/xml：XML 文件。

text/csv：CSV 文件。
JSON 类型

application/json：JSON 文件。

7.其他类型

application/octet-stream：任意二进制数据流，通常用作默认的二进制 MIME 类型。

application/x-www-form-urlencoded：通常用于表单数据提交的 MIME 类型。

如何使用 `Blob` 的 `type` 属性：

在创建 Blob 时，可以指定类型。如果不指定类型，则默认为空字符串 ""。

// 创建一个包含文本数据的 Blob
const textBlob = new Blob(["Hello, World!"], { type: "text/plain" });

// 创建一个包含图片数据的 Blob
const imageBlob = new Blob([imageData], { type: "image/jpeg" });