layui.form.submit 无法提交文件字段，因其仅收集普通字段值，不支持 file 类型；必须手动用 FormData 构造并配合 enctype="multipart/form-data" 发送。
layui.form.submit 无法直接提交文件字段
layui 的 form.on('submit(...)') 事件监听器本身不处理文件上传，它只收集普通表单字段（input[type="text"]、select 等）的值并触发回调。一旦表单里有 input[type="file"]，原生 submit 或 layui 的 submit 监听都不会自动携带文件二进制数据——浏览器会直接忽略，导致后端收不到文件。
所以不能指望 form.submit 事件里用 layui.form.val() 拿到文件对象，它压根不支持。
-
layui.form.val('formFilter')只返回字符串/数字/数组类字段，对type="file"字段返回空或undefined - 文件必须通过
FormData手动追加，且需用XMLHttpRequest或fetch发送 - 表单
enctype属性设为"multipart/form-data"是必须的，但 layui 不会自动设置，得手动写在<form>标签上
正确做法：禁用 layui submit 监听，改用原生 form submit + FormData
保留 layui 表单渲染和校验能力，但绕过它的提交逻辑，走标准文件上传流程。关键点是：阻止默认提交、收集字段、构造 FormData、手动发送。
示例 HTML 结构：
<form class="layui-form" action="" id="myForm">
<div class="layui-form-item">
<label class="layui-form-label">用户名</label>
<div class="layui-input-block">
<input type="text" name="username" required lay-verify="required">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">头像</label>
<div class="layui-input-block">
<input type="file" name="avatar" accept="image/*">
</div>
</div>
<div class="layui-form-item">
<button class="layui-btn" type="submit">提交</button>
</div>
</form>
JS 处理逻辑：
- 调用
layui.form.render()确保校验规则生效 - 用
form.on('submit(...)', ...)仅做「拦截」，不执行实际提交；或直接给<form>绑定原生submit事件更清晰 - 先调用
form.verify()主动触发校验，失败则 return - 用
new FormData(document.getElementById('myForm'))自动收集所有字段（包括文件） - 若需额外参数（如 token），用
formData.append('token', 'xxx')追加
注意 input[type="file"] 的 multiple 和 name 规则
如果允许上传多个文件，必须给 input 加 multiple 属性，且后端接收时要按数组方式处理（如 name="files[]" 或 name="files"，取决于后端框架约定）。layui 不干涉这个，但容易漏掉。
- 单文件：
<input type="file" name="avatar">→ 后端接收字段名avatar - 多文件：
<input type="file" name="photos" multiple>→FormData会把每个文件单独 append，后端收到的是同名多个值 - 不要用
lay-ignore忽略 file 元素，否则FormData构造时可能跳过它（某些旧版 layui 渲染逻辑下） - 如果用
layui.upload替代原生 file，那就完全脱离表单混合提交场景了，属于另一套方案
后端接收时常见 400/500 错误排查点
前端看似发出去了，后端却报错或收不到文件，大概率是这几个原因：
- form 标签没写
enctype="multipart/form-data"→ 浏览器根本不会编码文件，后端连 boundary 都解析不了 - 后端框架限制了单次请求体大小（如 Nginx 的
client_max_body_size、Spring Boot 的spring.servlet.multipart.max-request-size）→ 上传大文件直接 413 - 后端未正确读取
multipart数据，比如用req.body而不是req.files（Express）或request.FILES（Django） - CSRF token 缺失（如 Django、Flask-WTF）→ 提交被拦截，返回 403，但错误信息常不明确
调试建议：用浏览器 Network 面板看请求的 Request Payload 是否含 ------WebKitFormBoundary... 开头的分段内容，没有就说明 FormData 构造或 enctype 有问题。
混合提交这事，核心就一条：别信 layui 的 submit 回调能传文件，老老实实走 FormData + fetch，校验用它的，上传走自己的。
