javascript的文件上传怎么做_如何实现分片和断点续传-js教程-PHP中文网

javascript的文件上传怎么做_如何实现分片和断点续传

夢幻星辰

发布： 2025-12-22 18:23:32

原创

860人浏览过

JavaScript文件上传支持分片和断点续传需前后端协同：先用FormData+fetch实现基础上传；再按固定大小切片、附加chunkIndex/totalChunks/fileId上传；断点续传依赖fileId（推荐内容hash）查询已传分片并跳过，最后合并。

javascript的文件上传怎么做_如何实现分片和断点续传

JavaScript 实现文件上传，尤其是支持分片和断点续传，核心在于把大文件切分成小块、逐个上传、记录进度，并在中断后能从上次位置继续。不依赖后端配合就无法真正实现断点续传，前端只是控制逻辑，关键靠前后端协同设计。

基础文件上传（FormData + fetch）

这是起点，所有高级功能都基于它：

用 input[type="file"] 获取 File 对象
创建 FormData，append 文件或字段
用 fetch 或 XMLHttpRequest 发送，监听 upload.onprogress 获取进度

示例片段：

const file = input.files[0];
const formData = new FormData();
formData.append('file', file);

fetch('/upload', {
  method: 'POST',
  body: formData
});

登录后复制

手动实现分片上传

把文件按固定大小（如 1MB）切片，每片单独上传，带序号和唯一标识（如文件 hash）：

立即学习“Java免费学习笔记（深入）”；

用 file.slice(start, end) 提取 Blob 片段
每片 FormData 中附加参数：chunkIndex、totalChunks、fileId（推荐用文件内容 hash，如 spark-md5）
后端收到后暂存分片，收到全部后再合并

注意：浏览器中计算大文件 hash 耗时，建议用 Web Worker 避免阻塞 UI。

课游记AI

AI原生学习产品

168

查看详情

断点续传的关键机制

断点续传不是“自动恢复”，而是“查询+跳过已传”：

上传前先发请求到后端（如 GET /upload/status?fileId=xxx），询问哪些分片已存在
后端根据 fileId 返回已上传的 chunkIndex 列表
前端只上传缺失的分片，按序补全
上传完成后再触发合并请求（如 POST /upload/merge）

可靠性依赖：fileId 必须稳定（不能用 name + size，推荐 content-based hash），且后端需持久化分片状态（如存数据库或 Redis）。

实用建议与避坑点

真实项目中容易忽略但影响体验的细节：

并发控制：不要同时上传 100 个分片，用 PromisePool 限制并发数（如 3~5 个）
失败重试：单片上传失败应指数退避重试（如 1s、2s、4s），并允许用户取消
暂停/恢复：通过 abortController.abort() 中断请求；恢复时重新查已传状态，再继续
浏览器兼容性：File.prototype.slice 在旧版 Safari 有差异，建议用 file.slice || file.webkitSlice || file.mozSlice

不复杂但容易忽略。

以上就是javascript的文件上传怎么做_如何实现分片和断点续传的详细内容，更多请关注php中文网其它相关文章！