Vue3 + SpringBoot 分片上传与断点续传方案设计
Vue3 + SpringBoot 分片上传与断点续传方案设计
在大文件上传场景中，直接上传完整文件易出现超时、断网失败、占用带宽过高等问题。基于 Vue3 与 SpringBoot 实现的“分片上传 + 断点续传”方案，通过“拆分文件、记录进度、协同交互”的核心逻辑，可有效解决上述痛点，同时结合动态优化策略，兼顾效率、稳定性与用户体验。
一、核心方案：分片与断点续传的完整流程
方案的核心是通过 文件MD5（唯一标识文件） 和 分片索引（定位单个分片） 实现前后端协同，确保“断网可续传、分片不重复”，整体分为前端处理与后端接收两大模块。
1. 前端（Vue3）：分片生成与并行上传
前端负责将大文件拆分为小分片、携带标识上传，并通过预查询定位未传分片，核心分三步执行：
- 文件预处理：分片切割 + MD5计算
选择文件后，按固定初始大小（如5MB）切割成分片。同时使用spark-md5计算文件MD5，需注意大文件需“流式计算”——通过FileReader每次读取2MB文件流，避免一次性加载导致内存溢出。MD5将作为文件唯一标识，为后续断点续传、秒传提供依据。 - 预查询：定位已传分片（断点续传关键）
上传前调用后端接口，传入文件MD5，查询“该文件是否已上传过、已上传的分片索引”。若后端返回已传分片列表（如[0,1,3]），前端仅需上传未包含的分片（如2、4…），并同步更新进度条（已传分片数/总分片数）。 - 并行上传：多线程控制与合并请求
用 axios 发送 POST 请求（Content-Type: multipart/form-data），每个请求携带“文件MD5、分片索引、总分片数、分片二进制数据”。通过控制并发数（3-5个）避免压垮后端，同时为每个请求配置超时重试机制。所有分片上传完成后，发送“合并请求”，通知后端拼接分片。
2. 后端（SpringBoot）：分片接收与进度管理
后端负责接收分片、记录上传进度、最终合并文件，依赖 Redis 存储上传状态，确保数据可追溯，核心分三步执行：
- 分片接收与暂存
收到分片请求后，按“文件MD5”创建独立暂存目录（如./temp/chunks/xxx-md5/），将分片按索引命名存储（如分片0存为0文件），避免不同文件分片冲突。同时在Redis中用Set结构记录已上传分片（Key：file:{md5}:uploadedChunks，值：分片索引），并设置24小时过期时间，防止无效分片占用存储空间。 - 预查询响应：返回上传进度
接收前端预查询请求时，优先查询Redis中该MD5的已传分片，返回给前端；若查询到最终文件目录中已存在该MD5的完整文件（秒传逻辑），则直接返回“文件已存在”，让前端跳过上传流程。 - 分片合并：生成完整文件
收到“合并请求”后，按分片索引顺序（0→1→2…）读取暂存目录中的所有分片，追加写入最终文件（如./upload/files/xxx-md5.mp4）。合并完成后，删除Redis中的进度记录与暂存目录，释放服务器空间。
二、进阶优化：适配场景与提升效率
基础方案可满足功能需求，但实际应用中需结合“网络环境、用户体验、资源占用”做优化，以下三个方向是方案落地的关键。
1. 动态分片大小：适配不同网络速度
固定分片大小存在局限性——4G网络下5MB分片易超时，千兆网络下5MB分片请求次数过多。优化方案通过“测速+动态调整”实现分片大小适配：
- 网络测速：上传前先发送1MB测试包，根据“测试包大小/传输耗时”计算实际网速（如2MB/s）。
- 动态计算：按“目标单次上传时间（3-5s）”反向推导分片大小，公式为：
分片大小 = 实测网速 × 目标时间。例如网速2MB/s时，分片大小设为6-10MB，保证单次上传稳定在3-5s。 - 场景适配：网速<1MB/s时（弱网），分片设为2MB减少超时概率；网速>10MB/s时（高速），分片设为10-20MB减少请求次数。
2. 秒传机制：避免重复上传
若用户上传过相同文件（如重复传同一视频），可通过“MD5预校验”实现秒传，核心逻辑如下：
- 前端触发：计算文件MD5后，先调用后端“秒传校验接口”，传入MD5与文件后缀。
- 后端校验：查询最终文件目录，若存在以“MD5+后缀”命名的文件（如
xxx-md5.mp4），直接返回“秒传成功”；若不存在，再进入正常分片流程。 - 大文件优化：10GB以上大文件计算MD5耗时较长，可改为“首帧+中间帧+尾帧”计算——取文件前10KB、中间10KB、最后10KB生成MD5，大幅缩短计算时间，同时保证唯一性（冲突概率极低）。
3. 带宽自适应：减少网络占用冲突
若上传占满带宽，会导致用户同时刷视频、浏览网页时卡顿。通过“前端限流+后端控并发”实现带宽自适应：
- 前端限流：通过
navigator.connection.downlink获取用户当前带宽（如10Mbps≈1.25MB/s），为上传分配30%带宽配额（≈0.375MB/s）。利用 axios 的onUploadProgress监听实时上传速度，超过配额时暂停当前分片，1秒后重试，动态调节速率。 - 后端控并发：限制同一用户最多3个并发分片请求，避免单用户占用过多服务器带宽，保障多用户场景下的服务稳定性。
三、异常处理：保障方案鲁棒性
实际应用中需应对各类异常场景，以下两点处理逻辑可体现方案的严谨性：
- 分片丢失处理：合并时若后端发现暂存目录缺失某分片（如分片2），立即返回“合并失败”。前端收到响应后，重新发起预查询请求，定位缺失分片并补传，确保最终能生成完整文件。
- Redis宕机处理：Redis若故障，已传分片记录会丢失，前端可能重复上传所有分片。生产环境中可通过“Redis主从复制”保证高可用，或同时在前端本地Storage与后端Redis存储上传进度，双重备份避免数据丢失。
- 文件篡改校验：上传完成后，后端重新计算完整文件的MD5，与前端传入的MD5对比。若不一致，说明文件传输错误或被篡改，返回“上传失败”，避免脏数据存入系统。
四、方案总结
这套 Vue3 + SpringBoot 分片上传与断点续传方案，核心逻辑是“拆分+记录+协同”——前端拆分文件并携带标识上传，后端记录进度并合并分片；优化方向围绕“适配网络环境、提升用户体验、控制资源占用”展开，同时通过异常处理保障稳定性。实际项目中，还可结合“上传进度条可视化、取消上传（前端取消请求+后端删除分片）”等功能，进一步完善用户体验。