侧边栏壁纸
  • 累计撰写 218 篇文章
  • 累计创建 59 个标签
  • 累计收到 5 条评论

typescript - Blob

barwe
2021-10-27 / 0 评论 / 0 点赞 / 1,627 阅读 / 1,768 字
温馨提示:
本文最后更新于 2023-06-07,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

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" })
0

评论区