首页 > 文章 > 前端

JS大文件分片上传与续传方法

时间：2025-11-27 15:24:46 278浏览收藏

目前golang学习网上已经有很多关于文章的文章了，自己在初次阅读这些文章中，也见识到了很多学习思路；那么本文《JS大文件分片上传与断点续传技巧》，也希望能帮助到大家，如果阅读完后真的对你学习文章有帮助，欢迎动动手指，评论留言并分享~

分片上传与断点续传通过将大文件切块上传并记录进度，提升大文件上传的稳定性与效率。首先使用 File.slice() 将文件分割为固定大小的片段，每片通过 FormData 携带文件名、序号等信息上传；服务端按序接收并存储分片，支持查询已上传分片列表。前端利用 localStorage 或 IndexedDB 保存上传状态，上传前先获取服务端已上传分片，跳过重复上传，实现断点续传。为增强可靠性，可引入文件哈希作为唯一标识避免冲突，限制并发上传数控制资源消耗，对失败分片进行有限重试，并结合 xhr.upload.onprogress 显示实时进度。只要前后端协同管理分片状态，即可高效完成大文件上传任务。

JS实现大文件分片上传与断点续传_javascript技巧

大文件上传是前端开发中常见的需求，直接上传整个文件容易导致请求超时、内存占用过高或网络中断后需重新上传。使用JavaScript实现分片上传和断点续传，能显著提升上传稳定性与用户体验。

分片上传原理

将大文件切分为多个小块（chunk），逐个上传到服务器，服务端再按顺序合并。这种方式可以控制每请求的数据量，避免长时间阻塞。

关键步骤：

读取文件并使用 File.slice() 方法分割成固定大小的片段
为每个分片生成唯一标识（如文件名+分片序号）
依次发送分片数据，通常使用 FormData 包装
服务端接收并存储分片，记录上传状态

示例代码：

function uploadFileInChunks(file, chunkSize = 1024 * 1024) {
  const chunks = Math.ceil(file.size / chunkSize);
  let uploadedChunks = 0;
<p>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);</p><pre class="brush:php;toolbar:false;">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); // 查询服务端
<p>for (let i = 0; i < chunks; i++) {
if (uploadedIndices.includes(i)) continue; // 跳过已上传的</p><pre class="brush:php;toolbar:false;">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 完全能胜任大文件上传任务，断点续传也不复杂，关键是记录状态和合理处理异常。

本篇关于《JS大文件分片上传与续传方法》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！

JavaScript 大文件上传断点续传分片上传 File.slice()