Blob总结

Blob

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

创建Blob

通过构造函数：

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

• dataArray：数组，包含了要添加到Blob对象中的数据，数据可以是任意多个ArrayBuffer，ArrayBufferView， Blob，或者 DOMString对象。
• opt：对象，用于设置Blob对象的属性（如：MIME类型）

1. 使用一个字符串创建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)多用途互联网邮件扩展类型。是设定某种扩展名的文件用一种应用程序来打开的方式类型，当该扩展名文件被访问的时候，浏览器会自动使用指定应用程序来打开。多用于指定一些客户端自定义的文件名，以及一些媒体文件打开方式。

2. 使用DOMString对象创建Blob对象

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

3. 使用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
})