Node.js实现大文件断点续传

前言

平常业务需求：上传图片、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);
  // 循环文件size，文件blob存入数组
  let current = 0;
  for (current; current < file.size; current += itemSize) {
   
    fileCurrent.push({
    file: file.slice(current, current + itemSize) });
  }
  // axios模拟手动取消请求
  const CancelToken = axios.CancelToken;
  const source = CancelToken.source();
  // 当断点续传时，处理切片数量，已上传切片则不需要再次请求上传
  fileCurrent =
    count === 0 ? fileCurrent : fileCurrent.slice(count, sectionLength);
  // 循环切片请求接口
  for (const [index, item] of fileCurrent.entries()) {