Vue 3 中用 Axios 的 onUploadProgress 钩子监听文件上传进度，通过 loaded/total 计算百分比并绑定至 el-progress 等组件；多文件需独立管理进度状态，支持取消上传与状态提示。
Vue 3 中显示文件上传进度条，核心是捕获底层请求的字节级上传过程，并将实时进度映射到 UI 组件（如 Element Plus 的 onUploadProgress 钩子直接监听，更可控、更精准。
用 Axios 监听上传事件并计算百分比
Axios 请求配置中加入 onUploadProgress 回调，它会在上传过程中持续触发（只要服务端响应头含 Content-Length 且浏览器支持）：
- 回调参数是
ProgressEvent，含loaded（已传字节数）和total（总字节数） - 仅当
event.lengthComputable === true时才可安全计算，否则说明服务端未返回明确长度（如流式响应），此时进度可能始终为 0 或只触发一次 - 计算公式：
Math.round((event.loaded / event.total) * 100)，建议保留整数避免频繁重绘
单文件与多文件进度分别管理
多个文件上传时，每个文件应有独立进度状态，避免互相覆盖：
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
- 用数组或 Map 存储每个文件的进度值，例如：
const fileProgress = ref(new Map()) - 上传时传入文件标识（如
file.uid或index），在onUploadProgress中更新对应项 - 模板中用
v-for渲染每个文件的进度条，绑定各自进度值，避免共用一个progress响应式变量
搭配 UI 组件渲染进度条
以 Element Plus 为例，只需把计算出的数值传给
- 设置
:percentage="fileProgress.get(file.uid) || 0" - 添加状态提示：上传中显示“正在上传”，完成显示“上传成功”，失败显示错误图标
- 小文件（如几 KB）可能只触发一次
onUploadProgress（loaded === total），属正常现象，无需额外兜底逻辑
取消上传与边界处理
进度条体验完整离不开取消能力：
- Axios 支持
CancelToken或AbortController（推荐后者，现代标准），在请求配置中传入signal - 点击“取消”时调用
controller.abort()，同时重置对应文件的进度为 0，并标记状态为已取消 - 注意：取消后再次上传需新建 FormData 和 controller，不可复用已 abort 的 signal
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
