用 ref 管理已选文件列表，即手动维护响应式数组 files.value，通过 @change 获取 event.target.files 并转为数组追加或替换，支持增删改、数量限制、去重及预览，上传时遍历 files.value 构造 FormData。
用 ref 管理已选择文件列表，核心是手动维护一个响应式数组，而不是依赖 el-upload 的内部状态。这种方式更可控、更透明，尤其适合自定义上传逻辑或需要精细控制文件生命周期的场景。
创建 ref 存储文件列表
声明一个 ref 数组，用于保存用户每次选中的 File 对象（注意不是文件路径或 URL）：
- 使用 ref([]) 初始化空数组，确保响应式
- 每次
@change触发时，把event.target.files转为数组并追加或替换 —— 根据是否允许多选决定用push(...)还是直接赋值 - 避免直接赋值
event.target.files（它是只读类数组），应通过Array.from()或展开运算符转换
支持增删改与校验
文件列表不是静态展示，需配合业务规则动态操作：
-
删除某一项：用
files.value.splice(index, 1)或files.value = files.value.filter((_, i) => i !== index) -
清空全部：直接
files.value = [] -
限制数量：在添加前判断
files.value.length，超限时提示并阻止 -
去重/覆盖同名文件：可遍历比对
file.name，或用 Map 按 name 去重
绑定到视图并预览信息
将 ref 列表渲染为 UI 元素，展示关键元数据：
立即学习“前端免费学习笔记（深入）”；
- 遍历
v-for="(file, i) in files"，显示{{ file.name }}、{{ (file.size / 1024).toFixed(1) }} KB - 图片类文件可用
URL.createObjectURL(file)生成临时预览地址，上传后记得调用URL.revokeObjectURL()释放内存 - 支持编辑文件名（如绑定
v-model到file.displayName等扩展属性）
上传时正确构造 FormData
提交前，确保 FormData 中每个文件都来自当前 ref 列表，而非原始 input：
- 循环
files.value，对每个file调用formData.append('files', file)（多文件）或formData.append('file', file)（单文件） - 若需额外参数（如业务 ID、分类），一并
append进去 - 不要遗漏
headers: { 'Content-Type': 'multipart/form-data' }—— 实际由浏览器自动设置，通常不手动传
