前端大文件分片上传详解 – Spring Boot 后端接口实现

目录

1. 分片上传原理介绍
2. 前端分片上传流程概述
3. 后端接口设计思路
4. Spring Boot 实现大文件分片上传
5. 分片合并与状态校验
6. 断点续传与异常处理
7. 小结与扩展建议

1️⃣ 分片上传原理介绍

• 大文件上传问题：直接上传大文件（GB级别）可能因网络波动、请求超时失败，用户体验差。
• 分片上传解决方案：将大文件切割成多个小片（chunk），每个片段单独上传，降低单次请求压力。
• 优点：支持断点续传、失败重传，提高上传成功率和用户体验。

2️⃣ 前端分片上传流程概述

1. 用户选择文件
2. 读取文件并切割成指定大小的分片（例如 1MB）
3. 逐个分片发送 HTTP POST 请求上传，携带必要参数（文件标识、分片序号、总分片数）
4. 前端根据上传结果，处理重传或继续上传
5. 上传完成后，通知后端合并所有分片

3️⃣ 后端接口设计思路

通常设计两个主要接口：

请求参数通常包括：

• 文件唯一标识（fileMd5 / fileHash / uuid）
• 分片序号（chunkIndex）
• 总分片数（chunkTotal）
• 当前分片大小
• 分片文件流

4️⃣ Spring Boot 实现大文件分片上传

4.1 Controller示例代码

@RestController
@RequestMapping("/upload")
public class FileUploadController {

    private static final String UPLOAD_DIR = "/tmp/uploads/";

    // 接收单个分片
    @PostMapping("/chunk")
    public ResponseEntity<?> uploadChunk(
            @RequestParam("file") MultipartFile chunk,
            @RequestParam("fileMd5") String fileMd5,
            @RequestParam("chunkIndex") Integer chunkIndex,
            @RequestParam("chunkTotal") Integer chunkTotal) throws IOException {

        String chunkDir = UPLOAD_DIR + fileMd5 + "/";
        File dir = new File(chunkDir);
        if (!dir.exists()) {
            dir.mkdirs();
        }
        // 保存分片文件，命名为 chunkIndex
        File chunkFile = new File(chunkDir + chunkIndex);
        chunk.transferTo(chunkFile);

        return ResponseEntity.ok(Map.of("code", 0, "msg", "Chunk uploaded"));
    }

    // 合并所有分片
    @PostMapping("/merge")
    public ResponseEntity<?> mergeChunks(
            @RequestParam("fileMd5") String fileMd5,
            @RequestParam("fileName") String fileName,
            @RequestParam("chunkTotal") Integer chunkTotal) throws IOException {

        String chunkDir = UPLOAD_DIR + fileMd5 + "/";
        File mergedFile = new File(UPLOAD_DIR + fileName);

        try (FileOutputStream fos = new FileOutputStream(mergedFile, true)) {
            for (int i = 0; i < chunkTotal; i++) {
                File chunkFile = new File(chunkDir + i);
                Files.copy(chunkFile.toPath(), fos);
                chunkFile.delete(); // 合并后删除分片
            }
        }
        // 删除临时分片目录
        new File(chunkDir).delete();

        return ResponseEntity.ok(Map.of("code", 0, "msg", "File merged successfully"));
    }
}

5️⃣ 分片合并与状态校验

• 合并时可通过 fileMd5 校验文件完整性
• 可在合并前校验每个分片文件是否存在
• 对合并后的文件做大小与哈希校验，防止数据损坏

6️⃣ 断点续传与异常处理

• 设计接口查询已上传分片（前端上传前检查，避免重复上传）
• 对上传异常进行捕获，返回详细错误码与信息
• 前端支持重传失败分片，实现断点续传功能

7️⃣ 小结与扩展建议

• 优化点：支持多线程并发上传分片，提升上传速度
• 存储：可结合分布式文件系统（如FastDFS、MinIO）存储分片或合并文件
• 安全：加入权限校验、文件类型检测、防止恶意上传
• UI：前端可用第三方库（如 Resumable.js、fine-uploader）简化分片上传流程

如果你需要：

• ✅ 前端示例代码（JavaScript分片上传逻辑）
• ✅ 完整项目源码示例（含前后端）
• ✅ 断点续传查询接口设计
• ✅ 文件校验算法示例（MD5/SHA256）

告诉我，我帮你补充详细资料！