Vue 3多文件批量上传需禁用auto-upload，手动收集文件并统一构造FormData一次性提交；通过on-change更新fileList，上传时append所有文件及业务参数；进度与结果整体反馈，大文件需分片上传并控制并发。
Vue 3 中多文件批量上传的核心是「手动控制 + 单次请求」，而不是依赖 el-upload 默认的自动逐个上传。关键在于禁用自动上传、收集所有文件、统一构造 FormData、一次发给后端。
关闭自动上传并监听文件选择
el-upload 必须设置 :auto-upload="false"，否则选中多个文件会立刻触发 10 次独立请求。配合 :multiple="true" 和 :on-change="handleFileChange" 来捕获每次新增的文件：
- 每次选择都会触发 handleFileChange，参数 file 是当前新增的 File 对象，files 是当前全部已选文件列表
- 建议用 ref 声明 fileList 并在回调中更新：fileList.value = files（注意不是 push，避免重复）
- 可结合 :limit 控制最大数量，:accept 限定类型（但仅作前端提示，后端仍需校验）
统一构造 FormData 发起单次请求
点击“开始上传”按钮时，遍历 fileList，把每个文件 append 到同一个 FormData 实例中：
- 字段名保持一致（如 'files'），后端才能以数组形式接收（例如 IFormFile[]）
- 可额外 append 其他业务参数，如 userId、moduleId 等，无需额外接口传参
- 使用 axios 或 fetch 提交，记得不设 Content-Type —— 浏览器会自动设置 boundary
处理上传状态与错误反馈
单次请求下，进度和结果都是整体性的，更适合用户感知：
立即学习“前端免费学习笔记（深入）”；
- 用 axios 的 onUploadProgress 获取整体上传进度（event.loaded / event.total）
- 后端返回结构应包含每个文件的处理结果（成功/失败+原因），前端按序展示到文件列表旁
- 若某文件校验不通过（如类型、大小超限），应在 handleChange 阶段就过滤或提示，避免无效提交
进阶考虑：大文件分片与并发控制
当单个文件超过 50MB 或总文件体积较大时，需引入分片逻辑：
- 用 File.slice() 切分文件为固定大小块（如 2MB），每块单独上传并携带分片序号、总片数、唯一文件标识
- 后端收到所有分片后合并，再做格式校验和存储
- 并发请求数建议限制在 3–5 个，避免浏览器连接耗尽或服务端压力突增
