BlobPart
type BlobPart = BufferSource | Blob | string;
BlobPart
对象可以是原始二进制数组 (BufferSource
对象)、Blob
对象或者字符串。
Blob
declare var Blob: {
prototype: Blob;
new(blobParts?: BlobPart[], options?: BlobPropertyBag): Blob;
};
declare var
声明全局变量,prototype
指定继承自哪一个类,new
方法相当于Blob
的构造函数(调用Blob()
相当于调用Blob.new()
)。
在该对象的new
函数中:
blobParts
待转化的一组数据。由此可知,Blob
对象存储的是一组相同类型的数据;options
构建Blob
对象时的额外选项,一共有两个:type?: string
类文件对象的文件类型,MIME格式ending?: "native" | "transparent"
???
这个Blob
实际上就是我们在编程时调用的Blob
,它返回的是下面这个Blob
类的对象。
Blob类
上面的Blob
继承自另一个Blob
类,并实现了自己的构造方法。这个Blob
父类的接口如下:
interface Blob {
readonly size: number;
readonly type: string;
arrayBuffer(): Promise<ArrayBuffer>;
slice(start?: number, end?: number, contentType?: string): Blob;
stream(): ReadableStream;
text(): Promise<string>;
}
Blob
对象是一个类文件对象,它存储着不可变的原始数据。Blob
对象包含的数据不仅仅是 JavaScript 原生的格式。JavaScript 的File
类也是基于Blob
类实现的,它在Blob
类的基础上进行拓展,以适应用户自己的文件系统。
Blob
类提供了几个基础属性和方法:
size
字节大小type
文件类型,可在创建Blob
对象的时候指定arrayBuffer()
获取该对象引用的ArrayBuffer
对象slice()
切片stream()
转换成可读字节流text()
如果该对象是类文本文件对象,可以使用这个方法获取文本内容
Blob 对象的用法
Blob (Binary Large Object) 表示以二进制方式存储的大型对象,它将一堆二进制数据存储为一个对象,用于数据管理。
Blob 对象 是一个类文件对象(文件本质上就是一堆二进制数据的集合)。它可以是任意类型的文件,包括文本文件和二进制文件,并且可以按照需要以文本或者二进制的格式读取数据,或者转换成流进行操作。
总而言之,Blob
对象类似于只读文件,文件或者文件流与 Blob
对象之间可以相互转换。Web 中对文件系统的操作通过 File
类进行,该类也是基于 Blob
类实现的;服务器返回的文件流响应也可以转换成 Blob
对象进行后续处理。
创建一个类URL,该URL与普通URL具有相似的用法:
const url = URL.createObjectURL(blob);
使用Response
对象读取 Blob 中的文本内容:
const text1 = await (new Response(blob)).text();
const text2 = await blob.text();
使用场景
-
分片上传
-
存储下载数据
-
用作URL
https://zhuanlan.zhihu.com/p/161000123
示例
基于字符串:
const data = { name: "barwe", age: 21 }
const blob = new Blob([JSON.stringify(data)], { type: "application/json" })
// Blob { size: 25, type: "application/json" }
基于类型化的数组:
const typedArray = ...
const blob = new Blob([typedArray.buffer], { type: "application/octet-stream" })
评论区