易行男·龙大崇1. 项目背景与核心需求
在若依前后端分离架构中实现文件断点续传功能，本质上是要解决大文件传输过程中的网络不稳定问题。传统文件上传一旦中断就需要重新上传，对于视频编辑、工程设计等GB级文件传输场景极不友好。我们团队在最近一个医疗影像管理系统项目中，就遇到了医生上传CT扫描文件（平均单文件1.2GB）频繁失败的实际痛点。
断点续传的核心原理可类比下载工具的"断电续传"功能：
- 文件分块（通常2-5MB/块）
- 服务端记录已接收块序号
- 客户端通过MD5校验确保块完整性
- 最终合并时进行整体校验
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 技术方案设计
2.1 前端实现要点
采用Vue+ElementUI的上传组件改造方案：
javascript复制// 关键配置项
:auto-upload="false"
:multiple="false"
:limit="1"
:file-list="fileList"
:http-request="customRequest"
分块处理逻辑：
- 通过File API的slice方法切割文件
javascript复制const chunkSize = 2 * 1024 * 1024 // 2MB
const chunks = Math.ceil(file.size / chunkSize)
- 使用SparkMD5计算文件指纹
javascript复制import SparkMD5 from 'spark-md5'
const spark = new SparkMD5.ArrayBuffer()
2.2 后端关键接口设计
SpringBoot需提供三个核心接口：
- 初始化上传（/upload/init）
java复制@PostMapping("/init")
public Result initUpload(@RequestParam String fileName,
@RequestParam Long fileSize,
@RequestParam String fileMd5) {
// 创建临时目录
// 返回已上传分片列表
}
- 分片上传（/upload/chunk）
java复制@PostMapping("/chunk")
public Result uploadChunk(@RequestParam Integer chunkNumber,
@RequestParam String chunkMd5,
@RequestParam MultipartFile file) {
// 校验MD5
// 保存分片到临时目录
}
- 合并文件（/upload/merge）
java复制@PostMapping("/merge")
public Result mergeFile(@RequestParam String fileMd5) {
// 按序号合并所有分片
// 整体MD5校验
// 转移至正式存储
}
3. 核心问题解决方案
3.1 分片大小优化策略
通过实测不同网络环境下的传输效率，我们得出分片大小建议：
- 局域网：5MB
- 4G网络：2MB
- 弱网环境：512KB
动态调整算法：
java复制long estimatedBandwidth = getNetworkSpeed(); // 获取当前网速
int dynamicChunkSize = (int) (estimatedBandwidth * 0.8 / 1024);
3.2 断点续传的可靠性保障
- 采用Redis记录上传进度：
java复制// 存储结构
// key: file:{md5}:chunks
// value: Set<已上传分片序号>
redisTemplate.opsForSet().add("file:"+md5+":chunks", chunkNumber);
- 双重校验机制：
- 分片级别：上传前后MD5比对
- 文件级别：最终合并时全文件校验
3.3 大文件合并的内存优化
使用NIO的FileChannel避免OOM：
java复制try (FileChannel outChannel = new FileOutputStream(destFile).getChannel()) {
for (int i = 0; i < totalChunks; i++) {
File chunkFile = new File(chunkPath, i + ".tmp");
try (FileChannel inChannel = new FileInputStream(chunkFile).getChannel()) {
inChannel.transferTo(0, inChannel.size(), outChannel);
}
}
}
4. 完整实现流程
4.1 前端完整实现步骤
- 文件选择时计算MD5：
javascript复制const fileReader = new FileReader()
fileReader.onload = e => {
spark.append(e.target.result)
if (chunkIndex < chunks) {
loadNext()
} else {
const md5 = spark.end()
// 调用初始化接口
}
}
- 分片上传控制逻辑：
javascript复制const uploadChunk = async (chunkIndex) => {
const chunk = file.slice(start, end)
const formData = new FormData()
formData.append('chunk', chunk)
formData.append('chunkNumber', chunkIndex)
try {
await axios.post('/upload/chunk', formData, {
headers: { 'Content-Type': 'multipart/form-data' }
})
if (chunkIndex < chunks) {
uploadChunk(chunkIndex + 1)
} else {
mergeFile()
}
} catch (error) {
// 重试逻辑
}
}
4.2 服务端关键代码实现
- 分片存储策略：
java复制private String getChunkPath(String fileMd5, Integer chunkNumber) {
String tempDir = System.getProperty("java.io.tmpdir");
return tempDir + "/upload/" + fileMd5 + "/" + chunkNumber + ".tmp";
}
- 智能清理机制：
java复制@Scheduled(cron = "0 0 3 * * ?") // 每天凌晨3点执行
public void cleanTempFiles() {
File tempDir = new File(System.getProperty("java.io.tmpdir") + "/upload");
// 删除超过7天的临时文件
}
5. 性能优化实战技巧
5.1 并发上传控制
采用Promise.all实现可控并发：
javascript复制const parallelCount = 3 // 并发数
const uploadTasks = []
for (let i = 0; i < parallelCount; i++) {
uploadTasks.push(uploadNextChunk())
}
async function uploadNextChunk() {
while (currentChunk < totalChunks) {
await uploadChunk(currentChunk++)
}
}
await Promise.all(uploadTasks)
5.2 服务端性能调优
- 增加上传速度限制（防止单用户占满带宽）：
java复制@Bean
public MultipartConfigElement multipartConfigElement() {
MultipartConfigFactory factory = new MultipartConfigFactory();
factory.setMaxFileSize("2GB");
factory.setMaxRequestSize("2GB");
factory.setLocation(System.getProperty("java.io.tmpdir"));
return factory.createMultipartConfig();
}
- Tomcat连接参数优化：
properties复制server.tomcat.max-threads=200
server.tomcat.max-connections=1000
server.tomcat.connection-timeout=30000
6. 异常处理与问题排查
6.1 常见问题速查表
| 现象 | 可能原因 | 解决方案 |
|---|---|---|
| MD5校验失败 | 分片传输损坏 | 1. 检查网络丢包率 2. 增加重试机制 |
| 合并后文件损坏 | 分片顺序错乱 | 1. 检查分片编号逻辑 2. 合并前重新排序 |
| 上传速度骤降 | 服务端负载过高 | 1. 检查磁盘IO 2. 限制单IP并发数 |
6.2 日志监控要点
- 添加MD5计算耗时日志：
java复制long start = System.currentTimeMillis();
String md5 = DigestUtils.md5Hex(inputStream);
log.info("MD5 calculation took {}ms for {} bytes",
System.currentTimeMillis() - start, fileSize);
- 分片上传成功率监控：
javascript复制// 前端埋点
console.time('chunkUpload')
await uploadChunk()
console.timeEnd('chunkUpload')
7. 安全加固方案
7.1 恶意文件防御
- 文件头校验：
java复制private static final Map<String, String> FILE_SIGNATURES = Map.of(
"FFD8FF", "jpg",
"89504E47", "png",
"47494638", "gif"
);
public boolean validateFileSignature(File file, String expectedExt) {
// 读取文件头字节比对
}
- 病毒扫描集成：
java复制public void scanForVirus(File file) throws VirusDetectedException {
Process process = Runtime.getExec()
.exec(new String[]{"clamscan", file.getAbsolutePath()});
if (process.waitFor() != 0) {
throw new VirusDetectedException();
}
}
7.2 权限控制增强
- 上传令牌机制：
java复制@PreAuthorize("@ss.hasPermission('upload:create')")
@PostMapping("/init")
public Result initUpload(@RequestParam String token) {
if (!tokenService.validateUploadToken(token)) {
throw new ServiceException("Invalid upload token");
}
}
8. 扩展功能实现
8.1 上传进度实时展示
WebSocket推送方案：
javascript复制const socket = new WebSocket(`ws://${location.host}/upload/progress`)
socket.onmessage = (event) => {
const progress = JSON.parse(event.data)
this.uploadPercent = Math.round(
(progress.uploadedChunks / progress.totalChunks) * 100
)
}
8.2 分布式环境适配
- 共享存储方案：
java复制@Value("${file.storage.type}")
private String storageType;
public void saveChunk(MultipartFile file, String fileMd5, int chunkNumber) {
if ("minio".equals(storageType)) {
minioClient.putObject(bucketName,
getObjectName(fileMd5, chunkNumber),
file.getInputStream(), null);
} else {
// 本地存储逻辑
}
}
9. 实际部署建议
- Nginx配置优化：
nginx复制client_max_body_size 10G;
client_body_temp_path /dev/shm/nginx_temp;
proxy_read_timeout 300;
- 服务器资源监控指标：
- 磁盘IOPS（建议≥500）
- 内存使用率（建议≤70%）
- 网络带宽占用（建议≤80%）
在医疗影像系统上线后，断点续传功能使平均上传成功率从63%提升至99.7%，超时重传次数减少82%。特别要注意的是，实际测试中发现当分片大小超过8MB时，移动网络下的失败率会显著上升，最终我们采用动态分片算法后取得了最佳平衡。