前端分片上传速成：3天搞定，附项目实战

前端分片上传是处理大文件(如视频、大型压缩包)的核心技术，它能有效解决传统单次上传面临的超时、内存溢出以及网络不稳定导致整传失败等问题。其核心思想是将大文件在客户端预先切分为多个较小的数据块，再逐个或并行上传至服务器，最后由服务端完成合并。

以下是实现前端分片上传的完整技术逻辑与关键步骤：

 核心依赖 API

实现分片上传主要依赖浏览器原生的 Web API，无需额外插件：

File API & Blob.slice()：这是实现“分割”的技术基石。File 对象继承自 Blob，通过 slice(start, end) 方法可以按字节范围精确截取二进制数据片段，将大文件切割成多个小分片。

FormData：用于动态构建键值对式的表单数据，可以将切割后的 Blob 分片作为字段值，封装为独立的 HTTP 请求体。

XMLHttpRequest / Fetch API：用于发送分片请求。结合 XMLHttpRequest.upload.onprogress 事件，可以实时监听每一片的上传进度，实现高精度的百分比反馈。

 基础实现步骤

一个标准的分片上传流程通常包含以下 5 个步骤：

配置基础参数：定义分片大小(如 5MB)、上传接口地址等。

文件分片处理：通过 File.slice() 循环切割文件，生成分片数组，并记录每个分片的索引和大小。

计算文件哈希(可选但推荐)：使用 SparkMD5 等第三方库计算文件的唯一哈希值(MD5/SHA1)。这一步是实现“秒传”和“断点续传”的关键。

分片逐个/并发上传：遍历分片数组，使用 axios 或 fetch 上传。每个请求需携带核心元信息：文件哈希、分片索引、总分片数等。

通知后端合并：所有分片上传成功后，调用后端的合并接口，告知服务端该文件的所有分片已就绪，触发合并逻辑。

 进阶优化能力

为了让上传体验更流畅、更可靠，通常会叠加以下高级功能：

断点续传：上传中断后，前端请求后端查询已上传的分片列表，仅重新上传未完成的分片，无需从头开始。

秒传：上传前先计算文件哈希并传给后端校验。若后端已存在相同哈希的文件，直接返回上传成功，跳过整个上传流程。

并发控制：通过 Promise.allSettled 等机制限制同时上传的分片数(如 3-5 个)，避免浏览器连接数耗尽及服务端压力突增。

自动重试与错误隔离：单个分片失败不影响其他分片，可配置最大重试次数与指数退避策略，提升弱网环境下的成功率。

实时进度反馈：不仅提供整体上传百分比，还可细分至每个分片的上传进度，结合 requestAnimationFrame 实现丝滑的 UI 更新。

 成熟方案推荐

如果不想从零开发，可以使用成熟的开源组件，它们已经封装了上述所有复杂逻辑：

WebUploader：由百度前端团队开发，功能强大、配置灵活，原生支持分片上传、断点续传、并发控制、进度监控等高级特性，且兼容性好(支持 HTML5/Flash 双引擎)。