JS 和 Java 断点续传的实现

在现代应用中，文件上传常常遇到网络不稳定的情况，这时候就需要实现断点续传（Resumable Uploads）来提高用户体验。从 Java 后端到 JS 前端，数据的上传和恢复过程需要处理好。本文将详细介绍整个断点续传的流程，并提供具体代码示例。

1. 断点续传的流程

首先，我们来概述一下整个断点续传的实现步骤：

2. 每一步需要做的事情

步骤 1: 确定文件的大小和分块大小

// JS 代码 - 分块大小设置
const CHUNK_SIZE = 1024 * 1024; // 1MB

这里设置了每个文件分块的大小为 1MB。

步骤 2: 前端分割文件并记录已上传的分块信息

function chunkFile(file) {
    const totalChunks = Math.ceil(file.size / CHUNK_SIZE);
    const uploadedChunks = [];

    for (let i = 0; i < totalChunks; i++) {
        const start = i * CHUNK_SIZE;
        const end = Math.min(start + CHUNK_SIZE, file.size);
        const chunk = file.slice(start, end);

        uploadedChunks.push({ chunk, chunkIndex: i });
    }
    return uploadedChunks;
}

这段代码将文件分割成多个分块，并返回每个分块的信息。

步骤 3: 检查已上传的分块

async function checkUploadedChunks(fileId, totalChunks) {
    const response = await fetch(`/checkUploadedChunks?fileId=${fileId}`);
    const uploadedChunks = await response.json();
    
    const uploadedSet = new Set(uploadedChunks);
    return Array.from(uploadedSet).filter(chunkIndex => chunkIndex < totalChunks);
}

这里调用后端 API 检查哪些分块已经上传，返回一个已上传分块的索引数组。

步骤 4: 上传分块并记录状态

async function uploadChunk(fileId, chunk, chunkIndex) {
    const formData = new FormData();
    formData.append('fileId', fileId);
    formData.append('chunkIndex', chunkIndex);
    formData.append('chunk', chunk);

    const response = await fetch('/uploadChunk', {
        method: 'POST',
        body: formData,
    });
    
    return response.ok; // 检查上传是否成功
}

此函数处理每个分块的上传，并检查上传的成功与否。

步骤 5: 发送合并请求到后端

async function mergeChunks(fileId, totalChunks) {
    const response = await fetch('/mergeChunks', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({ fileId, totalChunks }),
    });
    
    return response.ok; // 合并成功返回true
}

上传所有分块后，发送一个合并请求到后端，以便将所有分块合并为一个完整的文件。

步骤 6: 后端合并所有已上传的分块并响应结果

在 Java 后端，处理合并请求的代码示例如下：

@PostMapping("/mergeChunks")
public ResponseEntity<String> mergeChunks(@RequestBody MergeRequest request) {
    String fileId = request.getFileId();
    int totalChunks = request.getTotalChunks();

    try {
        FileOutputStream outputStream = new FileOutputStream("path/to/location/" + fileId);
        for (int i = 0; i < totalChunks; i++) {
            File chunkFile = new File("path/to/temp/" + fileId + "_chunk" + i);
            Files.copy(chunkFile.toPath(), outputStream);
            chunkFile.delete(); // 删除临时分块
        }
        outputStream.close();
        return ResponseEntity.ok("Merge done!");
    } catch (IOException e) {
        return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body("Error merging chunks");
    }
}

这个后端函数接收合并请求，将所有分块顺序写入目标文件中，并删除临时分块。

3. 可视化流程

我们可以使用 Mermaid 图表示这个流程，帮助更好地理解整个数据流转：

journey
    title 断点续传流程
    section 前端
      1. 确定文件及分块 : 5: 前端
      2. 分割文件并上传 : 4: 前端
      3. 检查分块上传状态 : 4: 前端
      4. 上传未上传分块 : 4: 前端
      5. 发送合并请求 : 3: 前端
    section 后端
      6. 合并文件分块 : 5: 后端

总结

本文详细介绍了如何实现 Java 和 JavaScript 之间的断点续传功能。通过分割文件、检查已上传分块、上传分块、合并分块等步骤，我们能够灵活应对当前复杂的网络环境，让用户的上传体验更加平滑。

学习断点续传是很有意义的，特别是在文件上传的场景中。希望这篇文章能帮助你更好地理解这个过程并能独立实现它。如果有任何问题或实现上的困难，欢迎随时问我！