前端大文件上传

1. 开场概述

1. “大文件上传是前端开发中常见的需求，但由于文件体积较大，直接上传可能会遇到网络不稳定、服务器限制等问题。因此，通常需要采用分片上传、断点续传、并发控制等技术来优化上传体验”

2. 核心实现方案

“我通常会采用以下方案来实现大文件上传：

文件分片：将大文件切割成固定大小的块（例如 1MB 或 5MB），通过 Blob.slice() 方法实现。

分片上传：通过 FormData 将每个分片上传到服务器，使用axios发送请求。

秒传原理：在上传文件之前先询问这个文件服务器端是否已存在，

· 若已存在，则不需要上传了，直接让前端显示“已上传成功！

断点续传：
服务器记录已上传的分片，前端在上传前先查询已上传的分片列表，跳过已上传的部分。

并发控制：通过限制同时上传的分片数量，避免占用过多网络资源。

进度监控：
方案一“利用 axios的 onUploadPrigress可以实现接口请求进度
遇到问题：onUploadPrigress返回的进度只是文件切片
从前端上传到服务器这一过程的进度而已，
并不代表上传到服务器就绝对上传成功了！
后端报错造成上传失败,这样计算的进度条也是100%，所以文件完全上传到了服务器 !== 上传成功
解决方法：
与后端协商，得到切片并处理完后在返回值通知前端该切片以及上传成功
(上传成功的切片数 / 该文件的总切片数) * 100 去计算单个文件的上传进度条

业务需求：

在金融公司的贷前系统中，
用户需上传大量申请材料（如身份证、银行流水、合同扫描件等），
单个文件可能超过 1GB
且需支持多文件并发上传、断点续传这些要求。

技术方案与实现

分片上传与断点续传

实现逻辑：

前端分片：使用 Blob.slice() 将文件切割为 5MB 的块，

并为每个分片生成唯一 hash（基于文件名+分片序号+文件大小），

避免重复上传。

上传前校验：

调用服务端接口查询已上传分片列表，仅上传缺失分片。

并发控制：

限制同时上传的分片数为 3，避免浏览器线程阻塞。

断点续传（网络中断、超时、不小心刷新了页面等等，会导致上传中断）

断点续传的核心是记录已上传的文件分片信息，

当上传中断后，再次上传时跳过已成功上传的部分，

仅上传剩余分片。实现需前后端协作

实现的步骤

1. 文件分片
2. 生成分片唯一标识
   方案1：文件名 + 分片序号 + 文件大小（简单但可能有冲突）
   方案2：计算文件内容哈希（推荐，如MD5/SHA-256）
3. 查询已上传分片
   上传前，前端向服务端发送文件唯一标识（如哈希），获取已上传分片列表
4. 上传缺失分片
   仅上传未在服务端记录的分片。

断点续传的核心在于分片管理与状态持久化，需注意：

分片标识的唯一性
服务端分片信息的可靠存储
客户端与服务端的状态同步
最终文件完整性校验

通过合理的分片策略和错误处理机制，可显著提升大文件上传的健壮性和用户体验。