分片上传与断点续传通过将大文件切块上传并记录进度，提升大文件上传的稳定性与效率。首先使用 File.slice() 将文件分割为固定大小的片段，每片通过 FormData 携带文件名、序号等信息上传；服务端按序接收并存储分片，支持查询已上传分片列表。前端利用 localStorage 或 IndexedDB 保存上传状态，上传前先获取服务端已上传分片，跳过重复上传，实现断点续传。为增强可靠性，可引入文件哈希作为唯一标识避免冲突，限制并发上传数控制资源消耗，对失败分片进行有限重试，并结合 xhr.upload.onprogress 显示实时进度。只要前后端协同管理分片状态，即可高效完成大文件上传任务。
大文件上传是前端开发中常见的需求，直接上传整个文件容易导致请求超时、内存占用过高或网络中断后需重新上传。使用JavaScript实现分片上传和断点续传，能显著提升上传稳定性与用户体验。
分片上传原理
将大文件切分为多个小块（chunk），逐个上传到服务器，服务端再按顺序合并。这种方式可以控制每请求的数据量，避免长时间阻塞。
关键步骤：
- 读取文件并使用 File.slice() 方法分割成固定大小的片段
- 为每个分片生成唯一标识（如文件名+分片序号）
- 依次发送分片数据，通常使用 FormData 包装
- 服务端接收并存储分片，记录上传状态
示例代码：
立即学习“Java免费学习笔记（深入）”；
function uploadFileInChunks(file, chunkSize = 1024 * 1024) {
const chunks = Math.ceil(file.size / chunkSize);
let uploadedChunks = 0;
for (let i = 0; i < chunks; i++) {
const start = i * chunkSize;
const end = Math.min(file.size, start + chunkSize);
const chunk = file.slice(start, end);
const formData = new FormData();
formData.append('file', chunk);
formData.append('filename', file.name);
formData.append('chunkIndex', i);
formData.append('totalChunks', chunks);
uploadChunk(formData).then(() => {
uploadedChunks++;
if (uploadedChunks === chunks) {
console.log('上传完成');
}
});}
}
function uploadChunk(formData) {
return fetch('/upload/chunk', {
method: 'POST',
body: formData
}).then(res => res.json());
}
断点续传实现思路
上传中断后，无需从头开始，而是从上次中断的位置继续。核心在于记录已上传的分片信息。
实现方式：
- 使用 localStorage 或 IndexedDB 存储每个文件的上传进度（如已上传的 chunkIndex 列表）
- 上传前先向服务端查询已接收的分片，跳过已上传部分
- 服务端需提供接口返回指定文件的已上传分片列表
优化后的上传流程：
async function resumeUpload(file, chunkSize = 1024 * 1024) {
const chunks = Math.ceil(file.size / chunkSize);
const uploadedIndices = await getServerUploadedChunks(file.name); // 查询服务端
for (let i = 0; i < chunks; i++) {
if (uploadedIndices.includes(i)) continue; // 跳过已上传的
const start = i * chunkSize;
const end = Math.min(file.size, start + chunkSize);
const chunk = file.slice(start, end);
const formData = new FormData();
formData.append('file', chunk);
formData.append('filename', file.name);
formData.append('chunkIndex', i);
formData.append('totalChunks', chunks);
try {
await uploadChunk(formData);
saveLocalProgress(file.name, i); // 本地记录
} catch (err) {
console.warn(`第 ${i} 块上传失败`);
break; // 中断后下次可继续
}}
}
增强稳定性的建议
为了提升实际使用中的可靠性，可加入以下功能：
- 文件指纹： 使用 spark-md5 等库计算文件哈希值作为唯一标识，避免同名文件冲突
- 并发控制： 同时上传多个分片可提速，但需限制最大并发数防止资源耗尽
- 重试机制： 对失败的分片进行有限次数的自动重试
- 进度显示： 监听 xhr.upload.onprogress 或使用 AbortController 配合 fetch 实现上传进度反馈
基本上就这些。只要前后端配合好分片管理逻辑，JavaScript 完全能胜任大文件上传任务，断点续传也不复杂，关键是记录状态和合理处理异常。
