layui upload需设auto: false实现手动上传,choose只读文件,upload()才发请求;elem必为真实DOM节点,多行上传须动态render并destroy旧实例。
auto: false 是手动上传的开关,不是可选项
layui upload 默认是
,选完文件立刻发请求——这在需要二次确认、校验文件名或拼接额外参数时根本不可控。必须显式设为
,否则后面所有“点击上传”逻辑都白搭。
常见错误现象:
回调里能拿到文件,但没点按钮就已上传;或者点了上传按钮却没反应——八成是忘了关
。
后,
只负责读取文件,不触发上传
上传动作必须由你主动调用实例的
方法(注意不是
)
如果用了
,
会批量上传所有已选文件
upload.render() 必须绑定真实 DOM 元素,不能只靠 lay-options
很多人想省事,直接写
就完事——不行。layui upload 的
是必填项,且必须指向一个真实存在的节点(哪怕它是隐藏的
)。
使用场景:你想用文字链接、图标按钮甚至表格操作列里的“上传”文字来触发,就得先挂一个“傀儡”文件域,再让 upload 实例绑定它。
推荐做法:放一个
然后在你的自定义按钮里
模拟点击——这是唯一可靠唤起文件选择框的方式
手动上传要分两步走:选 + 传,别混成一步
所谓“点击按钮后才上传”,本质是把「选择文件」和「发起请求」拆成两个独立动作。很多坑就出在混淆了这两个阶段。
典型错误:
回调里存了
,但没保存;等点上传按钮时,
已失效,调
报错
。
在
中必须缓存
实例(比如赋给全局变量
或组件级
)
上传按钮的 click 事件里,调用
,而不是重新 render
若允许多选,
会自动遍历所有已选文件;无需自己循环
表格行内上传必须动态 render,不能页面加载时一次性初始化
表格数据是动态渲染的,每行都有自己的 ID 和上传上下文(比如要传
),这时如果所有行共用一个 upload 实例,参数就会串,上传结果对不上行。
性能影响:每次点某一行的上传,都要先
旧实例,再用当前行的元素和参数
新实例——看起来重,但实际开销极小;比强行用事件委托+全局状态维护清晰得多。
每行模板里放独立的
点击时,用
定位当前行输入框
先检查是否有旧实例:
,再
最容易被忽略的是 destroy 不干净导致内存泄漏,或者忘记给每个 input 加唯一 data 属性——结果所有行都传到同一个 ID 下。
auto: truefalsechooseautoauto: falsechooseupload()submit()multiple: trueupload()elemupload.render({ elem: '#hiddenFileInput', auto: false, ... })$('#hiddenFileInput')[0].click()chooseobjobjupload()"No file selected"chooseobjwindow.uploadChooseObjthis.chooseObjwindow.uploadChooseObj.upload()upload()pluginId=123destroy()render()$(this).closest('tr').find('.upload-input')if (self.inst) self.inst.destroy()upload.render({ elem: $input[0], url: '/upload?pluginId=' + id, ... })