Blob总结

时间：2023-09-11 21:37:02 t311a系列压力变送器

Blob

Blob表示二进制类型的大对象，在数据库管理系统中，将二进制数据存储为单个集合。
Blob 对象表示一个不可变、原始数据的类文件对象。Blob 不一定是JavaScript原始格式数据。File 接口基于Blob，继承了 blob 并将其扩展到支持用户系统的文件中。
Blob对象可视为存储二进制数据的容器，也可通过Blob设置二进制数据的MIME类型。

创建Blob

构造函数：

var blob = new Blob(dataArr:Array, opt:{type:string});

dataArray：包括添加到数组中的数组Blob对象中的数据可以是任何多个数据ArrayBuffer，ArrayBufferView， Blob，或者 DOMString对象。
opt：设置对象Blob对象的属性(如:MIME类型）

用字符串创建Blob对象

const str = {hello: "world"}; const blob = new Blob([JSON.stringify(str)], {type: 'application/json'}

生成的Blob对象如下：

Blob {   size: 17   type: "application/json"   __proto__: Blob }

Blob对象有两个属性：size和type。其中size属性表示数据的大小(以字节为单位)，type是MIME字符串的类型。

MIME(Multipurpose Internet Mail
Extensions)多用途互联网电子邮件扩展类型。它是一种用应用程序打开设置扩展名文件的方式类型。当访问扩展名文件时，浏览器将自动使用指定的应用程序打开它。它主要用于指定一些客户端的自定义文件名和一些媒体文件的打开方式。

使用DOMString对象创建Blob对象

const dom = "Hello,World!!" const blob = new Blob([dom], {type: 'text/xml'});

使用ArrayBuffer创建Blob对象

const abf = new ArrayBuffer(8); const blob = new Blob([abf], {type:'text/plain'});

方法

Blob.slice()创建一个包含源的方法Blob的指定字符范围内的数据的新Blob对象。

Blob.slice(start:number, end:number, contentType:string)

start：开始索引，默认为0。负数从最后一个字符开始计算
end：截取结束索引(不包括)end），负数从最后一个字符开始计算
contentType：新Blob的MIME类型，默认为空字符串

const blob = new Blob(["zzxxccvvbb"], {type:"text/plain"}); const blob2 = blob.slice(0,5,"text/plain")

blob2:

Blob {   size: 5   type: "text/plain"   __proto__: Blob }

使用场景

分片上传

File特殊类型的文件Blob，可任意使用Blob上下文中的类型。我们可以使用大文件slice切割大文件，然后分片上传。
分片上传逻辑如下：

获取要上传的文件File对象，根据chunk(每片大小)对文件进行分片
通过post方法轮流上传每个文件，其中url中拼接querystring描述当前上传的文件信息；post body存储本次上传的二进制数据片段
接口每次返回offset，用于执行下一次上传

Blob作为URL

Blob它可以很容易地用作其他标签URL。Blob URL/Object URL是协议，允许Blob和File对象用作图像，下载二进制数据链接等URL源。

我们使用浏览器 URL.createObjectURL 方法来创建 Blob URL，接收一种方法 Blob 对象，并为它创造一个唯一的对象 URL。这个 URL 在窗口中创建生命周期和生命周期 document 绑定。这个新的URL 对象表示指定 File 对象或 Blob 对象。该方法创建了输入对象的内存引用地址。
其形式为blob:/，在Chrome中生成对应的示例如下：

"blob:chrome-extension://lecdifefmmfjnjjinhaennhdlmcaeeeb/0f36aeda-9351-4e38-9379-93efc9360f6b"

示例：

const string = `Year,Make,Model,Description,Price     1997,Ford,E350,"ac, abs, moon",3000.00     1999,Chevy,"Venture ""Extended Edition""","",4900.00     1999,Chevy,"Venture ""Extended Edition, Very Large""",,5000.00     1996,Jeep,Grand Cherokee,"MUST SELL!     air, moon roof, loaded",4799.00`;            const blob = new Blob([string], { type: "text/csv, charset=ANSI" });       const link = document.createElement("a");       link.download = "text-file"; // 下载文件名称       link.target = "_blank";       link.style.display = "none";       link.href = URL.createObjectURL(blob); // 构建下载链接       document.body.appendChild(link);       link.click();       document.body.removeChild(link);

假如你得到了一个BlobURL，想重新转化Blob对象，只能这样做URL当做下载链接重新下载

axios.get('blob:XXX', {responseType: 'blob'}) .then(res => {     // use res.data })

锐单商城拥有海量元器件数据手册、IC替代型号，打造电子元器件IC百科大全！

Blob总结

相关文章