前端大文件上传

1. 开场概述

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

2. 核心实现方案

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

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

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

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

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

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

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

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