Vue表单校验与文件上传组件结合需手动同步fileList并用自定义validator替代required，通过@change触发校验、提交前二次检查，避免伪隐藏字段。
Vue 表单校验与文件上传组件（如 el-upload 或 a-upload）结合时，不能直接套用普通输入框的 v-model + required 校验逻辑。核心问题在于：文件上传组件不自动同步状态到表单 model 字段，导致验证规则“看不见”已选文件。要真正生效，必须打通数据流、主动触发校验或接管验证逻辑。
绑定专用字段并手动维护 fileList
在 form model 中为上传组件分配一个明确字段（如 fileList），并确保所有文件操作都同步更新它：
- 用
:file-list="form.fileList"双向绑定展示列表 - 在
@change和@remove回调中，显式赋值this.form.fileList = fileList - 若使用手动上传（
:auto-upload="false"），上传前也要确保fileList已写入新文件
用自定义 validator 替代 required
放弃依赖 required: true，改用函数式校验，直接检查真实文件状态：
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
- 规则写法：
{ validator: (rule, value, callback) => { if (!this.form.fileList?.length) callback(new Error('请上传文件')); else callback(); }, trigger: 'change' } -
trigger: 'change'要配合el-upload的@change事件，确保每次选择/删除后都触发校验 - 如果上传成功后还需校验服务器返回结果（如是否存入数据库），可在
@success中再次调用this.$refs.formRef.validateField('fileList')
提交前手动拦截 + 强制校验
在表单提交按钮的 click 事件中，不只依赖 validate()，而是叠加一层判断：
- 先调用
this.$refs.formRef.validate()执行常规校验 - 再单独检查
if (!this.form.fileList?.length)，提示并return - 对多图/单图场景可进一步判断数量（如
fileList.length 或fileList.length > 1）
避免隐藏字段“骗过”校验的土办法
有些方案用不可见的 el-input 或 el-checkbox-group 绑定一个空值字段来触发验证，虽能跑通但破坏语义、增加冗余。不推荐长期使用，仅作临时兼容手段。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
