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

liuian 2024-12-26 15:04 51 浏览

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>

以上代码就实现了大文件的分片上传功能，具体运用到工程中的演示效果如下所示：