前端小技巧:利用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前置知识点
因为我们工程中很多是基于 <input type="file"> 这个文件选择器来上传文件的。
这个文件选择器返回的是一个FileList类数组对象，其中数组中的每个元素都是一个File实例对象。
而这个File对象其实就是一个特殊的Blob对象实例，它除了继承了Blob对象所有的属性和方法，还新增了name和lastModifiedDate这两个属性。
File对象用法示例：
let file=new File(["my name is martin"],"myFile",{type:"text/plain",lastModified:new Date()})
console.log(file);
//File构造函数接受三个参数:
//第一个参数是数组，表示数据内容
//第二个参数是文件名
//第三个参数是一个对象，包含type和lastModified属性
3.2大文件分片上传实例（这段代码要着重理解）
废话不多说，先上完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="file" id="file" onchange="doupload(event)">
<script src="./jquery-2.2.0.min.js"></script>
<script>
function upload(url,file,callback) {
console.log("进入二级函数");
let chunkSize=10*1024*1024; //分片大小
let chunks=Math.ceil(file.size/chunkSize); //片数
for(let i=0;i<chunks;i++){
let fd=new FormData(); //关于FormData对象不理解的请看我的上一篇文章
let start=i*chunkSize;
let end=Math.min(chunkSize,file.size-start);
let chunk=file.slice(start,end);
fd.append("file",chunk);
fd.append("fileName",chunk.name);
fd.append("index",i);
fd.append("totalSize",file.size);
$.ajax({
type:"POST",
url:url,
data:fd,
contentType:false, //这里一定要设置成false
processData: false,
success:function (data) {
console.log(`分片${i}送成功`);
},
error:function (err) {
console.log(err);
}
})
}
}
function doupload(e) {
let url="localhost:5000/upload"; //上传的目标地址
let file=e.target.files[0];
console.log(file);
upload(url,file,function (err,res) {
if(err){
console.log(err);
}else{
console.log("success");
}
})
}
</script>
</body>
</html>
以上代码就实现了大文件的分片上传功能，具体运用到工程中的演示效果如下所示：
4.总结
大文件分片上传时，一般是使用Blob的特殊实例对象File来对文件进行切分，然后使用FormData对象来储存分片文件，最后利用ajax请求向服务端发送分片文件。对于FormData对象不了解的同学可以翻看我的FormData用法解析这一篇文章。
关注我，一起学习前端，共同从小白走向高级工程师。
