批量上传任意格式的文件,并上传实现了进度展示,断点续传,暂停,取消,极速秒传的功能

批量上传任意格式的文件,并上传实现了进度展示,断点续传,暂停,取消,极速秒传的功能

Property
Mar 8, 2022 02:28 PM
Status
Date
URL
https://github.com/yp94/file-upload
notion image

大体积文件上传 + 断点续传
该项目来源于公司内部产品需求,前端基于React,后端使用Node.js处理文件。可以批量上传任意格式的文件,并实现了上传进度展示,断点续传,暂停,取消,极速秒传的功能

功能列表

  • 进度显示
  • 断点续传
  • 极速秒传
  • 暂停上传
  • 取消上传
  • 上传优先级

预览

批量上传
notion image
极速秒传
notion image
断点续传
notion image

技术概览

前端

  • React渲染页面
  • Blob#slice 实现文件切片
  • spark-md5 + web-worker 生成文件hash
  • xhr 发送 formdata

后端

  • Node.js搭建http服务器
  • multiparty 处理 formData
  • fs-extra 操作读写

开始

npm install
启动前端:
npm run start
启动后端:
cd server/
node index.js
上传的文件位于项目根目录target文件夹