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

背景

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

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

1、前端逻辑代码;

2、node接口

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

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

使用 Web Worker + SparkMD5 根据文件内容生成 hash 值
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!收工!

相关推荐
小小小小宇3 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊3 小时前
Python之--基本知识
开发语言·前端·python
安全系统学习4 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖4 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖4 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水5 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐5 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06275 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台5 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue
灿灿121385 小时前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css