分片上传与断点续传 Demo

0 阅读1分钟

分片上传与断点续传 Demo

这是一个完整的前后端示例项目(React+Springboot),用来演示一个大文件上传系统是怎么工作的。

环境部署

1.代码仓库

前端地址:github.com/xumaxie/fil…

后端地址:github.com/xumaxie/fil…

2.环境部署与项目启动

由于项目设计到 redis,推荐使用 后端服务file_slice_upload_backend/doc 目录中的 docker-compose.yml 启动 redis 的服务,或者 直接安装 redis 到本机环境

  • mac 点击直接在 IDEA中执行运行即可
  • windows 可以在 WSL 中执行 docker-compose命令

项目运行步骤按照 readme 的步骤即可启动成功:github.com/xumaxie/fil…

项目基本描述

分片上传是一个很实际的问题:

  • 文件很大,不能一次性传完
  • 网络不稳定,上传中途可能断开
  • 用户可能会暂停后继续
  • 相同文件可能已经传过,不应该重复上传

这个项目的做法不是“把整个文件一次传给后端”,而是:

  1. 前端先把文件切成很多小块
  2. 每一块单独上传
  3. 后端记录哪些块已经收到
  4. 如果中断,下次只传没传完的块
  5. 全部传完后,后端再把这些小块合并成真正的文件

如果你是第一次接触“分片上传”“断点续传”“秒传”这些词,这个 Demo 会按照从宽到窄、从面到点的顺序带你理解整个项目。

image.png