Vue 3 文件与表单数据同传需用 FormData 手动组装：禁用自动上传，提取 File 对象，按类型 append 至 FormData（普通字段转字符串，文件直传），不设 Content-Type；后端用 @RequestPart 匹配字段名接收。
Vue 3 中文件上传与表单数据一起提交，核心是用 FormData 手动组装数据，而不是依赖表单自动提交或组件默认行为。关键在于阻断自动上传、提取文件对象、把普通字段和文件统一挂载到 FormData 实例中，再通过 axios 或 fetch 发送。
禁用自动上传，手动接管文件选择
使用 el-upload 或原生 <input type="file"> 时，必须关闭自动提交（:auto-upload="false" 或 return false 在 before-upload 钩子中），否则文件会立刻发请求，无法和表单其他字段合并。
-
before-upload返回false，阻止组件上传，并把file存入响应式数据（如form.file = file） - 如果允许多文件，用数组收集：
form.files.push(file) - 注意：
file是File对象，不是路径字符串，不能直接赋值给v-model
构建 FormData 并追加所有字段
点击“确定”提交时，新建 FormData 实例，遍历表单模型对象，逐个 append 字段。普通字段直接 append，文件字段需确保是 File 或 FileList 类型。
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
- 对每个 key，判断值是否为
File或FileList：是则formData.append(key, value)；否则formData.append(key, String(value)) - 数组字段（如多选标签、多个附件）需循环 append，保持 key 相同，后端才能接收为列表
- 不要手动设置
Content-Type请求头 —— 浏览器检测到 FormData 会自动加上multipart/form-data; boundary=...
后端接收需匹配 @RequestPart 或 MultipartFile
Spring Boot 等后端框架需用对应注解接收混合数据。不能只用 @RequestBody，必须用 @RequestPart("fieldName") 分别绑定字段和文件。
立即学习“前端免费学习笔记（深入）”；
- 普通字段：用
@RequestPart String version或@ModelAttribute绑定 DTO - 单文件：用
@RequestPart("file") MultipartFile file - 多文件：用
@RequestPart("files") List<multipartfile> files</multipartfile> - 字段名（如
"file"）必须和前端formData.append("file", ...)的 key 完全一致
补充细节：防重复、清空、类型校验
实际交互中容易忽略的体验点：
- 选相同文件不触发 change？在
before-upload后重置input.value = ""，下次可重新选 - 上传前做大小/类型校验，例如
if (file.size > 5 * 1024 * 1024)提示超限 - 提交后清空文件引用（
form.file = null），避免重复提交同一文件对象 - 若用
el-upload的file-list回显，删除时要同步从form.files数组中移除
