应提前维护响应式文件列表，用ref声明含uid、status等字段的对象数组；新增/更新/删除均通过重新赋值 filelist.value 实现，避免 push/splice；渲染时按 status 动态展示不同ui。
上传成功后管理文件列表，关键不是“等上传完再塞进去”，而是提前维护一个可响应式更新的列表，上传成功只是刷新其中某几项的状态或补充元数据。直接 push 或 splice 原始 ref 数组可能不触发视图更新，必须通过重新赋值方式确保响应式生效。
用 ref 主动维护文件状态列表
声明一个 ref 数组，每一项不只是 File 对象，而是带完整生命周期信息的对象：
- 包含原始 file（用于上传）、name、size、status（'pending' / 'uploading' / 'success' / 'error'）、url（上传后返回）、previewUrl（本地预览用）等字段
- 初始化：const fileList = ref([])
- 用户选择后，用 Array.from(event.target.files) 转成数组，逐个构造对象并推入 fileList.value —— 注意是 fileList.value = [...fileList.value, newItem]，不是 .push()
上传成功时精准更新对应条目
on-success 回调里不要清空重赋整个列表，而是定位到刚上传成功的那一项（可通过 file.uid 或临时 id 匹配），更新它的 status 和服务端返回字段：
- 例如：fileList.value = fileList.value.map(f => f.uid === uid ? { ...f, status: 'success', url: response.url, previewUrl: response.url } : f)
- 如果需要追加服务端返回的新文件信息（比如后台生成了缩略图字段），也在这一步合并进去
- 避免用 index 查找——因为多文件并发上传时顺序不可靠；推荐在选择时就为每个 file 分配唯一 uid
支持删除、重试与清空操作
所有操作都走“读取当前值 → 计算新数组 → 重新赋值”流程，保证响应式稳定：
- 删除某项：fileList.value = fileList.value.filter(f => f.uid !== targetUid)
- 重试上传：fileList.value = fileList.value.map(f => f.uid === uid ? { ...f, status: 'pending' } : f)，再调用上传逻辑
- 清空全部：fileList.value = []
- 注意：删除前检查 status，禁止删掉 status 为 'success' 的项（除非业务允许撤回）
渲染时按状态区分展示逻辑
模板中 v-for 渲染 fileList，根据 status 动态显示不同 UI：
- status 为 'pending'：显示文件名、大小、待上传提示
- status 为 'uploading'：显示进度条 + 百分比（需配合 on-progress）
- status 为 'success'：显示预览图（图片用 url）、下载按钮、复制链接等
- status 为 'error'：显示错误图标 + 简短提示 + 重试按钮
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
