layui的form.on('submit')无法从data.field获取file控件的文件对象，需手动通过document.queryselector获取原生input元素并读取.files[0]或array.from(input.files)；须手动阻止默认提交行为。
form.on('submit') 里拿不到 <input type="file"> 的文件对象？
因为 layui 的 form.on('submit') 默认只收集表单内 name 属性存在的普通字段（如 text、select），而原生 <input type="file"> 元素即使有 name，其值在提交时也不会被序列化进 field 对象——它只会传一个空字符串或 undefined。
所以你不能指望 data.field 里直接出现文件名或文件对象。必须手动提取 DOM 中的 <input type="file"> 元素并读取 .files。
- 确保上传控件是原生
<input type="file">，不是 Layui 封装的upload.render()组件（后者走独立回调） - 给该
input加上name（比如name="avatar"），方便 DOM 定位，但别依赖它出现在data.field里 - 用
document.querySelector('input[name="avatar"]')或$('input[name="avatar"]')[0]拿到原生元素，再取.files[0]
如何在 submit 回调中正确读取多个文件或限制类型
原生 .files 是 FileList，不是数组，但可以用展开语法或 Array.from() 转换。注意：Layui 表单提交不自动阻止默认行为，得手动 return false 或 event.preventDefault()，否则页面刷新，.files 就丢了。
- 单文件：直接取
input.files[0]，检查是否为File实例（避免用户没选就点提交） - 多文件：用
Array.from(input.files)得到真正的数组，再.filter()类型或大小 - 常见校验：
file.type.startsWith('image/')、file.size （2MB） - 如果用
form.verify自定义验证，只能校验「是否已选择」，无法读取.files，因为验证函数不传 DOM 元素
和 Layui upload 组件混用时的典型误区
如果你同时用了 upload.render({ elem: '#uploadBtn', done: ... })，那这个上传组件会自己处理文件上传，跟 form.on('submit') 完全无关。此时表单提交里根本不需要、也不应该再去读 <input type="file"> —— 因为那个 input 可能已被 upload 隐藏或接管。
- 场景一：纯前端预览 + 表单一起提交 → 用原生
input[type=file]，手动读.files，再通过FormData发送 - 场景二：先上传到服务器拿到 URL，再把 URL 提交到主表单 → 不需要在
submit里碰文件对象，只需确保 upload 的done回调把返回的 URL 写进某个隐藏域（如<input name="avatar_url" type="hidden">） - 错误做法：在
submit里对 upload 渲染过的按钮调.files→ 返回null或空FileList
实际提交时怎么把文件和其他字段一起发出去
Layui 的 form.on('submit') 不支持直接提交二进制文件，必须用 FormData 手动构造请求。不能靠 $.ajax({ data: data.field })，因为 data.field 是纯对象，塞不进 File。
- 先创建
const fd = new FormData() - 用
fd.append('title', data.field.title)塞普通字段 - 用
fd.append('avatar', fileInput.files[0])塞文件（注意键名要和服务端约定一致） - 用原生
fetch或$.ajax({ processData: false, contentType: false })发送 - 务必设置
processData: false和contentType: false，否则 jQuery 会试图序列化 FormData 并覆盖正确的 boundary
文件对象本身没有「路径」属性，file.name 是客户端原始文件名，file.size 和 file.type 才是真正可用的元信息。别尝试读 file.path —— 浏览器出于安全限制，这个字段始终为空或不可访问。
