vue 3 中用 ref 管理文件上传进度需为每个文件独立维护进度字段，通过 map 更新 filelist 实现精准响应式；配合 axios 的 onuploadprogress 钩子计算百分比，并在模板中按 status 和 progress 动态渲染 ui，避免直接修改数组项或原地变更导致响应式失效。
Vue 3 中用 ref 管理文件上传进度状态，核心是把“进度值”声明为响应式变量，并在上传过程中实时更新它；但要注意：进度本身不能只靠单个数字，而应与具体文件绑定，否则多文件并发时会互相覆盖或错位。
用 ref 精确绑定每个文件的进度
不要只定义一个全局 progress.value = 0，而是为每个待上传文件维护独立的进度字段：
- 选择文件后，构造含
uid、status、progress（初始为 0）等字段的对象，推入fileList.value - 上传时传入该文件的
uid，并在onUploadProgress回调中精准更新对应项：fileList.value = fileList.value.map(f => f.uid === uid ? { ...f, progress: Math.round((e.loaded / e.total) * 100) } : f) - 这样每个文件的进度条都能独立渲染，不会因并发上传导致数值混乱
配合 axios 实时捕获上传进度
使用 axios 发起上传请求时，通过 onUploadProgress 钩子获取原生 ProgressEvent：
Vue Composition Analyzer
下载
分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……
- 确保请求配置中启用进度监听：
axios.post(url, formData, { onUploadProgress: handler }) - 在
handler中检查e.lengthComputable，再计算百分比，避免出现NaN或 Infinity - 注意：不要在 handler 里直接修改 DOM 或触发复杂逻辑，只做
ref更新，保持轻量
模板中按进度动态渲染 UI
在 v-for 渲染文件列表时，结合 progress 和 status 控制显示：
-
status === 'uploading'且progress ：显示带百分比的进度条 -
progress === 100但后端尚未返回结果：可设为'processing'状态，提示“服务端处理中” - 上传失败时重置
progress为 0，方便重试时重新开始计数
避免常见响应式失效问题
直接修改数组某一项的属性（如 fileList.value[0].progress = 50）可能不触发视图更新：
- 必须用“读取 → 计算新数组 → 重新赋值”模式，例如
fileList.value = [...fileList.value]或.map()后整体赋值 - 不要用
push、splice原地修改ref数组，它们无法被 Vue 3 的 Proxy 正确追踪 - 若需深层响应式（如嵌套对象中的 progress），确保整个对象结构在初始化时就完整，不要后期新增未声明字段
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
