分片上传与断点续传实现详解

分片上传与断点续传实现详解

在现代Web应用中，用户经常需要上传大文件，如视频、压缩包等。传统的文件上传方式在面对大文件时容易出现超时、失败等问题，而且一旦上传中断就需要重新上传整个文件，浪费时间和带宽。为了解决这些问题，分片上传和断点续传技术应运而生。

什么是分片上传和断点续传？

分片上传是将一个大文件分割成多个小块（分片），分别上传到服务器，最后在服务器端将这些分片合并成完整文件的技术。

断点续传是指在上传过程中，如果因为网络或其他原因导致上传中断，可以从上次中断的位置继续上传，而不需要重新上传整个文件。

前端操作流程详解

前端在整个分片上传和断点续传过程中起着关键作用，主要负责文件的分片、MD5计算、上传控制等任务。

1. 文件选择与初始化

当用户选择一个大文件后，前端JavaScript代码会执行以下操作：

获取用户选择的文件对象

读取文件基本信息（文件名、大小等）

计算整个文件的MD5值（用于唯一标识文件和断点续传）

2. 文件分片处理

前端需要将大文件按照指定大小进行分片：

// 示例：文件分片逻辑

function createFileChunks(file, chunkSize) {

const chunks = [];

let cur = 0;

while (cur < file.size) {

chunks.push({

index: chunks.length,

chunk: file.slice(cur, cur + chunkSize)

});

cur += chunkSize;

}

return chunks;

}

通常分片大小设置为1MB-10MB之间，根据网络情况和文件大小动态调整。

3. MD5值计算

在上传前，前端需要计算整个文件的MD5值：

// 示例：计算文件MD5

function calculateFileMD5(file) {

return new Promise((resolve, reject) => {

const spark = new SparkMD5.ArrayBuffer();

const reader = new FileReader();

const blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice;

const chunkSize = 2097152; // 2MB

const chunks = Math.ceil(file.size / chunkSize);

let currentChunk = 0;

reader.onload = function(e) {

spark.append(e.target.result);

currentChunk++;

if (currentChunk < chunks) {

loadNext();

} else {

const md5 = spark.end();

resolve(md5);

}

};

reader.onerror = function() {

reject('计算MD5出错');

};

function loadNext() {

const start = currentChunk * chunkSize;

const end = ((start + chunkSize) >= file.size) ? file.size : start + chunkSize;

reader.readAsArrayBuffer(blobSlice.call(file, start, end));

}

loadNext();

});

}

4. 断点检查

使用计算出的MD5值向服务器查询上传状态：

// 示例：检查断点

async function checkUploadBreakPoint(md5) {

const response = await fetch(`/checkMd5?md5=${md5}`);

return await response.json();

}

服务器会返回：

如果文件从未上传过：返回fileSize=0和新的taskId

如果文件部分上传：返回已上传的fileSize和原有的taskId

5. 分片上传控制

根据断点检查结果，前端开始上传分片：

// 示例：上传分片

async function uploadChunks(chunks, taskId, md5, breakPoint = 0) {

// 从断点位置开始上传

for (let i = breakPoint; i < chunks.length; i++) {

const formData = new FormData();

formData.append('taskId', taskId);

formData.append('chunkNumber', i + 1);

formData.append('chunkSize', chunks[i].chunk.size);

formData.append('totalChunks', chunks.length);

formData.append('fileSize', computeFileSize(i)); // 计算当前分片的起始位置

formData.append('fileName', fileName);

formData.append('file', chunks[i].chunk);

formData.append('code', businessCode);

const response = await fetch('/chunkUpload', {

method: 'POST',

body: formData

});

const result = await response.json();

if (result.code !== 200) {

throw new Error('上传失败');

}

}

}

6. 上传状态管理

前端需要管理整个上传过程的状态：

显示上传进度条

处理上传成功/失败事件

在网络中断时尝试重连

上传完成后通知用户

后端实现原理

1. 分片上传参数实体类

@Data

public class MultipartFileParam implements Serializable {

private static final long serialVersionUID = 3238600879053243080L;

/**

* 文件传输任务ID

*/

@ApiModelProperty(value = "文件传输任务ID:调用checkMd5返回")

private String taskId;

/**

* 当前为第几分片

*/

@ApiModelProperty(value = "当前为第几分片")

private int chunkNumber;

/**

* 每个分块的大小

*/

@ApiModelProperty(value = "每个分块的大小")

private long chunkSize;

/**

* 分片总数

*/

@ApiModelProperty(value = "分片总数")

private long totalChunks;

/**

* 文件大小

*/

@ApiModelProperty(value = "文件大小:这里只偏移量，断点后的末尾，续传前的开始")

private long fileSize;

/**

* 文件名称

*/

@ApiModelProperty(value = "文件名称")

private String fileName;

/**

* 分块文件传输对象

*/

@ApiModelProperty(value = "分块文件传输对象：分片文件的数据")

private MultipartFile file;

/**

* 业务类型

*/

@ApiModelProperty(value = "业务类型")

private String code;

}

2. Redis键常量定义

public class UpLoadConstant {

private final static String uploading = "Uploading:";

private final static String file = uploading + "file:";

// 当前文件传输到第几块

public final static String chunkNum = file + "chunkNum:";

// 当前文件上传的路径

public final static String localLocation = file + "localLocation:";

public final static String task = uploading + "task:";

public final static String fileMd5 = file + "md5:";

}

3. 分片上传核心实现

public R