Vue中用ref管理文件上传进度需声明响应式ref(0)，在axios的onUploadProgress回调中通过.value更新，并配合v-if控制显示，注意重置进度、手动补100%及分片加权计算。
Vue 中用 ref 管理文件上传进度，核心是把进度值绑定到响应式变量上，并在 onUploadProgress 回调里实时更新它。关键不在于 ref 本身多复杂，而在于它如何和 axios 的上传事件联动、怎么避免进度跳变或卡死。
ref 定义进度变量要可响应
在 Vue 3 Composition API 中，用 ref 声明一个初始为 0 的进度值即可：
-
const uploadProgress = ref(0)—— 这个变量后续能被模板直接读取、也能被onUploadProgress修改 - 不要用普通 let/const，否则修改后视图不会自动刷新
- 如果需要控制进度条显示/隐藏，可额外配一个
const isUploading = ref(false)
在 axios 请求中接入 onUploadProgress
上传时必须把进度回调函数传进 axios 配置，且确保它能访问并更新 ref 变量：
- FormData 构建后，调用
axios.post(url, formData, { onUploadProgress: (e) => { ... } }) - 在回调里判断
e.lengthComputable，再算百分比：uploadProgress.value = Math.round((e.loaded / e.total) * 100) - 注意：不能直接赋值
uploadProgress = xxx，必须通过.value设置
模板里用 ref 变量驱动 UI
进度值有了，模板里就能自然响应变化：
立即学习“前端免费学习笔记（深入）”；
<p>上传中：{{ uploadProgress }}%</p>- 配合 Ant Design Vue 或 Element Plus 的
<a-progress :percent="uploadProgress" />，自动动效 - 建议加个条件渲染：
v-if="isUploading"，避免未上传时显示 0%
常见坑点与处理
实际开发中容易忽略的细节：
-
多次上传覆盖问题：同一个 ref 被多个请求共用，可能造成进度错乱。解决办法是每次上传前重置
uploadProgress.value = 0 -
进度不到 100% 就结束：后端返回快、但浏览器还没发完全部字节。可在
.then()里手动设uploadProgress.value = 100，再延时清空 -
大文件分片上传时：单个分片的
onUploadProgress只反映该片进度，总进度需按分片数加权计算，此时仍用同一个 ref 更新，但算法要变
