文章目录
文件上传系统是前后端分离项目,实现普通文件上传、大文件分片上传功能;大文件分片上传提供并发上传、超时控制、失败重传、中止上传等能力,通过分片md5、文件md5验证完整性。
该项目包含浏览器前端和命令行前端,流程图、交互图介绍时使用命令行前端。
命令行前端项目
上传流程图

前后端交互图

源码
https://gitee.com/file-upload-system
演示
详细设计:
- 小于1M文件上传直接上传
- 大于1M全新文件,分片上传,上传成功
- 大于1M全新文件分片上传,部分分片上传失败重传,文件上传成功
- 大于1M上传过文件再次上传,文件上传成功
小于1M文件上传直接上传
#### 大于1M全新文件,分片上传,上传成功
大于1M全新文件分片上传,部分分片上传失败重传,文件上传成功
大于1M上传过文件再次上传,文件上传成功
浏览器前端项目
演示
普通文件上传、列表、下载、预览
详细设计:
- 文件正常上传,上传完成文件在上传列表中展示
- 上传列表支持刷新获取最新数据
- 已上传文件支持下载、预览
普通文件上传演示
大文件分片上传
详细设计:
- 大文件分片上传成功,上传过程中展示loading、上传进度 // 视频 0″ 开始
- 文件未上传完成,未上传完成分片再次上传 // 视频 38″ 开始
- 分片部分上传失败,自动尝试重传,重传成功 // 视频 59″ 开始
- 上传过程中中止上传 // 视频 1′35″ 开始
- 上传超时中断上传 // 视频 2′12″ 开始
大文件上传演示
性能优化
大文件hash计算较慢,后端保证所有分片已上传且完整,可以无需计算文件hash
浏览器前端对比go cmd客户端
功能 | 浏览器前端 | go cmd客户端 |
---|---|---|
超时控制 | setTimout+监听 | context上下文,链式控制 |
并发 | 单线程,Promise.allSettled | goroutine天然支持 |
文件操作 | 浏览器沙箱,支持简单api操作 // 文件hash计算明显慢很多 | 本地文件系统操作高效 |
相关资料
进阶资料
解读Google分布式文件系统GFS // 这个bilibili博主的作品都不错