vue项目性能优化——断点续传-526互联

一、上传文件有两套方案
1、基于文件流（form-data） element-ui上传组件默认是基于文件流的
2、客户端把文件转化为BASE64，再传给后台

1、基于文件流方案代码
用element-ui提供基于文件流的上传方案：

<template>
<div id="app">

<el-upload
drag
action="/single1"
:show-file-list="false"
:on-success="handleSuccess"
:before-upload="beforeUpload"
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">
将文件拖到此处，或
<em>点击上传</em>
</div>
</el-upload>

<div class="uploadImg" v-if="img">
<img :src="img" alt />
</div>
</div>
</template>

if (!/(png|gif|jpeg|jpg)/i.test(type)) {
this.$message("文件合适不正确~~");
return false;
}

if (size > 200 * 1024 * 1024) {
this.$message("文件过大，请上传小于200MB的文件~~");
return false;
}

return true;
},
},
};
</script>

2、基于BASE64的上传方案
<template>
<div id="app">
<el-upload drag action :auto-upload="false" :show-file-list="false" :on-change="changeFile">
<i class="el-icon-upload"></i>
<div class="el-upload__text">
将文件拖到此处，或
<em>点击上传</em>
</div>
</el-upload>

<div class="uploadImg" v-show="img">
<img :src="img" alt />
</div>
</div>
</template>

export default {
name: "App",
data() {
return {
img: null,
};
},
methods: {
async changeFile(file) {
if (!file) return;
file = file.raw;
// 继续做格式校验
/*
* 把上传的文件先进行解析（FileReader）
* 把其转换base64编码格式
* 自己基于axios把信息传递给服务器
* ...
*/
let result = await fileParse(file, "base64");
result = await axios.post(
"/single2",
qs.stringify({
chunk: encodeURIComponent(result),
filename: file.name,
}),
{
headers: {
"Content-Type": "application/x-www-form-urlencoded",
},
}
);
result = result.data;
if (result.code == 0) {
this.img = result.path;
}
},
},
};
</script>

二、如何实现断点续传？
1、拿到文件，对文件进行切片，有两个方式，一种时固定数量，另一种时固定大小。
2、用SparkMD5库对每一个分片进行命名（服务器接口后，会对相同hash的文件进行合并）
3、发请求传文件，可以有串行和并行两种方式。这里使用串行，一个一个发，方便点击暂停上传的时候取消发送。

4、可以拿一个数组保存待发的文件，上传成功的文件可以从数组里面删除。这样，当再次点击继续发送的时候，就不需要重复发送了。

5、等全部文件发完了，再发一个请求告诉服务器文件发完了

dom部分：

<div id="app">
<el-upload drag action :auto-upload="false" :show-file-list="false" :on-change="changeFile">
<i class="el-icon-upload"></i>
<div class="el-upload__text">
将文件拖到此处，或
<em>点击上传</em>
</div>
</el-upload>

<div class="progress">
<span>上传进度：{{total|totalText}}%</span>
<el-link type="primary" v-if="total>0 && total<100" @click="handleBtn">{{btn|btnText}}</el-link>
</div>

<div class="uploadImg" v-if="video">
<video :src="video" controls />
</div>
</div>

文件上传时调用的方法：

async changeFile(file) {
if (!file) return;
console.log('file', file)
file = file.raw;
// 解析成buffer数据
// 切片处理，把文件切成多个部分（固定数量/固定大小)
// 每一个切片都有自己的部分数据和自己的名字
let buffer = await fileParse(file, "buffer"),
spark = new SparkMD5.ArrayBuffer(),
suffix;
spark.append(buffer);
let hash = spark.end();
suffix = /\.([0-9a-zA-Z]+)$/i.exec(file.name)[1];
console.log('suffix', suffix)
// 创建100个切片
let partList = [],
partsize = file.size / 100,
cur = 0;
for(let i = 0; i < 100; i++) {
let item = {
chunk: file.slice(cur, cur + partsize),
filename: `${hash}_${i}.${suffix}`,
};
cur += partsize;
partList.push(item)
}
this.partList = partList;
this.hash = hash;
this.sendRequest();
},

发送请求的方法：

async sendRequest() {
// 根据100个切片创建100个请求（集合）
let requestList = [];
this.partList.forEach((item, index) => {
// 每一个函数都是发送一个切片的请求
let fn = () => {
let formData = new FormData();
formData.append("chunk", item.chunk);
formData.append("filename", item.filename);
return axios.post('/single3', formData, {
headers: { "Content-Type": "multipart/form-data" },
}).then(res => {
res = res.data;
if (res.code == 0) {
this.total += 1;
this.partList.splice(index, 1);
}
})
}
requestList.push(fn);
})
let complete = async () => {
let result = await axios.get("/merge", {
params: {
hash: this.hash,
},
});
result = result.data;
if (result.code == 0) {
this.video = result.path;
}
};
let i = 0;
let send = async() => {
// 都发完了
if (this.abort) return;
if (i >= requestList.length) {
complete();
return;
}
await requestList[i]();
i++;
send();
}
send();
},

处理切换按钮的逻辑：

handleBtn() {
if (this.btn) {
// 断点续传
this.btn = false;
this.abort = false;
this.sendRequest();
return;
}
// 暂停上传
this.btn = true;
this.abort = true;
}

总结
虽然文件断点续传的功能要浪费额外的性能，造成网络请求变多的问题，但是这提高了用户体验。

参考文章：http://blog.ncmem.com/wordpress/2023/12/19/vue%e9%a1%b9%e7%9b%ae%e6%80%a7%e8%83%bd%e4%bc%98%e5%8c%96-%e6%96%ad%e7%82%b9%e7%bb%ad%e4%bc%a0/

欢迎入群一起讨论