基于React、Ts、nodejs的大文件上传分片、暂停等功能的实现

李泽南2023-09-14 9:25

背景

最近由于业务需求, 需要上传大文件, 为了让用户上传起来更快速, 不禁想起最近比较火的大文件上传, 于是不如实践一下, 写出符合业务需求的大文件上传, 不仅样式可以自定义, 各种功能细节点都在自己掌握之中, 由于本次做的是一个demo，大家可以根据自己的需要去进行更改，都很容易的！本文使用 React 框架来搭建, 在 Antd 框架基础之上来写样式, 后端采用 node.js 来提供接口. 感兴趣的可以继续看下去.咻~

内容主要大致分为两部分：

1、前端逻辑代码；

2、node接口

相信大家都做过很多次的类似于上传文件的功能，不知道有没有碰到过这种困扰：正在上传~80% ，error：网络不佳，停止上传！ ，如果说是个小文件也就罢了，几个g的文件，重新上传的时候还要从头再来。~~心态爆炸，不想干了~~ ，那么好，以下这个办法可以完全解决上传终止后，再次上传给它接上，正在上传~81%，哎！很神奇吧！哈哈哈哈~！

首先将文件进行分片可以按照比例分成十份，不分大小，从而进行分片上传；然后进行计算文件的hash值，通过对比hash判断文件上传到哪一步，如果文件已经存在数据库中，那么就秒传，嗖！

使用 Web Worker + SparkMD5 根据文件内容生成 hash 值

根据内容生成 hash 值需要大量时间计算，为防止阻塞 UI 渲染线程，使用 Web Worker
Web Worker：developer.mozilla.org/zh-CN/docs/...

javascript 复制代码

let worker = new Worker("/hash.js");
//......
const spark = new self.SparkMD5.ArrayBuffer();
let percent = 0;
let perSize = 100 / partList.length;
let buffers = await Promise.all(
  partList.map(
    ({ chunk, size }) =>
      new Promise((resolve) => {
        const reader = new FileReader();
        reader.readAsArrayBuffer(chunk);
        reader.onload = function (event) {
          percent += perSize;
          self.postMessage({ percent: Number(percent.toFixed(2)) });
          resolve(event.target.result);
        };
      })
  )
);
buffers.forEach((buffer) => spark.append(buffer));
self.postMessage({ percent: 100, hash: spark.end() });

唔唔喔喔~~~~~~~累了不想写了，GitHub链接在下方，有感兴趣的直接clone下来，直接跑就完啦！

Github地址：github.com/li-0801/rea...

ok！收工!