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

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

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

2025-11-20

浏览次数：次

返回列表

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

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

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

分片上传原理

将大文件切分为多个小块（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()); }

断点续传实现思路

上传中断后，无需从头开始，而是从上次中断的位置继续。核心在于记录已上传的分片信息。

Kreado AI

Kreado AI是一个多语言AI视频创作平台，只需输入文本或关键词，即可创作真实/虚拟人物的多语言口播视频。为创作者提供AI赋能

182 查看详情 Kreado AI

实现方式：

使用 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);
  s*eLocalProgress(file.name, i); // 本地记录
} catch (err) {
  console.warn(`第 ${i} 块上传失败`);
  break; // 中断后下次可继续
}