change事件是监听文件选择的唯一可靠入口，需用formdata+fetch上传而非form.submit()，el-upload应手动控制并汇总文件id后再提交其他字段。
监听 input[type="file"] 的 change 事件触发上传
用户选中文件后，change 事件是唯一可靠且兼容性最好的入口。不能依赖 click 或 focus，因为它们不表示文件已确定；也不能用 input 事件，它在部分浏览器（如 Safari）中对文件输入无效。
常见错误：直接在 change 回调里调用 form.submit() —— 这会提交空表单，因为文件字段的值只是路径字符串，服务器根本收不到二进制数据。
- 必须在
change中读取event.target.files，拿到FileList对象 - 创建
FormData实例，用.append('field-name', file)显式添加文件 - 后续用
fetch或XMLHttpRequest发送，而不是原生表单提交
用 FormData + fetch 实现“上传即提交”
HTML 原生表单提交无法携带文件并保持页面不刷新，所以“自动提交”实际指的是异步上传 + 后续逻辑触发。这里没有真正的“表单 submit”，而是用 fetch 模拟整个提交过程。
关键点：不要手动设置 Content-Type。如果设了 headers: {'Content-Type': 'multipart/form-data'}，浏览器会把它当普通 JSON 处理，导致后端解析失败。
-
fetch接收FormData时，会自动设置正确的Content-Type（带 boundary），你完全不用管 - 若需传额外字段（如 token、type），直接
formData.append('token', 'xxx')即可 - 上传完成后，再执行业务逻辑，比如跳转、清空表单、显示成功提示
示例片段：
document.getElementById('myfile').addEventListener('change', function (e) {
const file = e.target.files[0];
if (!file) return;
const formData = new FormData();
formData.append('uploadFile', file);
formData.append('extra', 'value');
fetch('/api/upload', {
method: 'POST',
body: formData // 不要加 headers
})
.then(r => r.json())
.then(data => {
console.log('上传完成，可执行下一步');
document.getElementById('myForm').reset(); // 清空或跳转等
});
});
使用 el-upload 时怎么等全部上传完再提交其他字段
Element Plus 的 el-upload 默认是自动上传，但“自动提交表单”不是它的职责。你要的是：文件上传完毕 → 收集服务端返回的文件 ID → 和表单其他字段一起发给后端接口。
容易踩的坑：@upload-success 触发多次（每个文件一次），但你通常只希望所有文件都成功后再汇总提交；另外，fileList 可能包含被删除又重选的项，不能直接用 this.fileList.length 判断是否传完。
- 设
:auto-upload="false"，改用手动this.$refs.uploadComponent.submit() - 监听
@upload-success，把响应中的文件 ID 存入数组，例如this.uploadedIds.push(response.id) - 在
@on-success（注意不是@upload-success）里判断fileList.filter(f => f.status === 'success').length === this.uploadedIds.length - 此时再调用业务接口，把
this.uploadedIds和表单其他字段一并提交
为什么不能靠 form.submit() 提交带文件的表单
能，但代价高：页面必然刷新，无法做上传进度、错误重试、多文件并发控制。而且一旦用了 enctype="multipart/form-data"，你就没法再用 fetch 或 axios 拦截或修改请求体。
真正的问题不在“能不能”，而在“该不该”。现代前端几乎从不走纯 HTML 表单提交文件这条路，除非你在写一个无 JS 的降级页面。
- 如果必须用原生提交（如 SEO 要求、极简场景），确保
<form></form>有action、method="POST"、enctype="multipart/form-data"，且<input type="file">有name属性 - 上传完成后服务端返回 HTML 页面，由它决定跳转或渲染结果 —— 这种流程无法在前端控制“自动提交其他字段”
- 想混合使用（文件走 form 提交，其他字段走 AJAX），技术上可行但语义混乱，维护成本陡增
复杂点在于：上传完成 ≠ 表单可提交。你得明确区分“文件上传完成”和“业务数据提交完成”这两个阶段，中间往往还要校验、拼接、关联 ID。漏掉这个分层，很容易写出状态错乱的代码。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
