前端小技巧：利用Blob对象切片上传大文件

1.什么是Blob对象？

Blob对象表示二进制文件的数据内容，并且可以操作二进制文件，因此它常用于读写文件。

Blob对象的构造函数Blob()由浏览器原生提供，实例化对象如下：

let blob=new Blob(["my name is martin"],{type:"application/json"})

可以看出，Blob构造函数接受两个参数。

• 第一个参数是数组，数组元素可以是字符串或二进制文件，用来表示Blob实例对象的数据内容。
• 第二个参数是配置对象，但是目前该对象只有一个type属性可提供配置，它的值是一个字符串，表示数据的MIME类型，默认是空字符串，关于MIME类型分类，可以参照以下这张表：

2.Blob对象的属性和方法

2.1Blob属性

废话不多说，先直接打印一个Blob对象给大家看看：

let blob=new Blob(["my name is martin"],{type:"application/json"});console.log(blob);

可以看出，一个Blob实例对象包含两个属性：

• size:表示数据的大小
• type：表示数据的MIME类型

2.2Blob方法

Blob实例对象只有一个slice方法，这个方法和数组的slice方法很像，都是用来切割数据的，切割完返回一个相同类型的数据。这里返回的是一个Blob对象。

slice用法详解

yourBlob.slice(start, end, contentType);

可以看出Blob对象的slice方法包含三个参数:

• start:切割起始位置(包含)
• end：切割结束位置(不包含)
• contentType:返回的新Blob对象的数据类型(默认为空字符串)

上个小例子帮大家理解一下：

切割文件简易版：

代码：

let blob=new Blob(["my name is martin"],{type:"application/json"});let newBlob_1=blob.slice(0,3,"application/json");let newBlob_2=blob.slice(3,blob.size,"application/json");console.log(blob);console.log(newBlob_1);console.log(newBlob_2); 

结果图：

分析：从结果图中可以看出，初始Blob对象大小为17，最后被切割成两个大小为3和14的Blob对象，如果将初始Blob对象的数据看成是一个文件，那么这段代码的作用就是直接将一个大文件分片成两个小文件了。

事实上，文件的分片原理就是这样，用Blob对象将文件分片是不是很简单。

3.如何使用Blob对象实现分片上传

上面说的都是Blob对象的基础知识点，这一part讲的工程实践应用才是重头戏。

3.1前置知识点

因为我们工程中很多是基于 这个文件选择器来上传文件的。

这个文件选择器返回的是一个FileList类数组对象，其中数组中的每个元素都是一个File实例对象。

而这个File对象其实就是一个特殊的Blob对象实例，它除了继承了Blob对象所有的属性和方法，还新增了name和lastModifiedDate这两个属性。

File对象用法示例：

 let file=new File(["my name is martin"],"myFile