基于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!收工!

相关推荐
web守墓人40 分钟前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
Savior`L1 小时前
CSS知识复习5
前端·css
许白掰1 小时前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器
中微子5 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
中微子6 小时前
React 状态管理 源码深度解析
前端·react.js
加减法原则7 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js
yanlele8 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
lichenyang4538 小时前
React移动端开发项目优化
前端·react.js·前端框架
天若有情6738 小时前
React、Vue、Angular的性能优化与源码解析概述
vue.js·react.js·angular.js
你的人类朋友8 小时前
🍃Kubernetes(k8s)核心概念一览
前端·后端·自动化运维