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

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

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。

标签： javascript java redis 前端 浏览器 app safari 后端 red