前言
平常业务需求:上传图片、Excel等,毕竟几M的大小可以很快就上传到服务器。针对于上传视频等大文件几百M或者几G的大小,就需要等待比较长的时间。这就产生了对应的解决方法,对于大文件上传时的暂停、断网、网络较差的情况下, 使用切片+断点续传就能够很好的应对上述的情况
方案分析
- 切片* 就是对上传视频进行切分,具体操作为:* File.slice(start,end):返回新的blob对象* 拷贝blob的起始字节* 拷贝blob的结束字节
- 断点续传* 每次切片上传之前,请求服务器接口,读取相同文件的已上传切片数* 上传的是新文件,服务端则返回0,否则返回已上传切片数
具体解决流程
该demo提供关键点思路及方法,其他功能如:文件限制,lastModifiedDate校验文件重复性,缓存文件定期清除等功能扩展都可以在此代码基础上添加。
html 部分
<input class="video" type="file" />
<button type="submit" onclick="handleVideo(event, '.video', 'video')">提交
</button>
script 部分
let count = 0; // 记录需要上传的文件下标
const handleVideo = async (event, name, url) => {
// 阻止浏览器默认表单事件
event.preventDefault();
let currentSize = document.querySelector("h2");
let files = document.querySelector(name).files;
// 默认切片数量
const sectionLength = 100;
// 首先请求接口,获取服务器是否存在此文件
// count为0则是第一次上传,count不为0则服务器存在此文件,返回已上传的切片数
count = await handleCancel(files[0]);
// 申明存放切片的数组对象
let fileCurrent = [];
// 循环file文件对象
for (const file of [...files]) {// 得出每个切片的大小let itemSize = Math.ceil(file.size / sectionLength);// 循环文件si