必须将 upload.render() 返回实例赋值给变量才能操作,否则清空无效;清空需三步:置空 files、清 DOM、reload();choose 中用 obj.pushFile() 清旧队列;done 中按 key 删除 files 项。
upload.render 返回的实例必须保存到变量里才能操作
不存实例,后续所有清空动作都无效。layui 的 upload.render() 返回一个实例对象,它内部维护着 files 属性和 dom 渲染状态。如果没用变量接住,比如写成 layui.upload.render({...}) 而不赋值,你就彻底失去对这个上传组件的控制权。
常见错误是直接在 done 回调里试图调用 this.files = [] —— 这里的 this 指向的是回调函数上下文,并非 upload 实例本身。
- 正确做法:声明一个变量,如
let uploadInst = layui.upload.render({...}) - 多个上传区域必须为每个分配独立变量名,例如
uploadAvatar、uploadCert - 变量作用域要保证在
done回调里能访问到,闭包或模块级变量更稳妥
清空已上传文件队列的核心三步:置空 files + 清空 DOM + reload()
只做其中一步,UI 或状态都会不同步。Layui 不提供公开的 clear() 方法,必须手动组合这三步:
-
uploadInst.files = []:清掉 JS 内部队列,否则下次点击上传按钮仍会发请求 -
uploadInst.config.elem.next('.layui-upload-list').html(''):清掉预览 DOM,否则缩略图还挂着 -
uploadInst.reload():触发重绘,让组件恢复初始“未选中”状态
注意:form.reset() 或手动清空原始 <input type="file"> 的 value 完全无效,因为 Layui 已接管整个流程,状态完全在 JS 实例里。
choose 回调里不能删 files,但可以提前清理上一次残留
如果用户反复点“选择文件”,又没设 multiple: false,obj.pushFile() 会不断追加,导致重复上传。这时候得在 choose 开头就清理旧队列,但不是删 uploadInst.files,而是用 obj.pushFile() 拿到当前队列快照再删:
- 声明一个外部变量,如
let UPLOAD_FILES - 在
choose第一行执行UPLOAD_FILES = obj.pushFile() - 紧接着遍历
UPLOAD_FILES并delete UPLOAD_FILES[key],保留最新一个(如果是单图场景) - 千万别在
choose里写uploadInst.files = [],这会导致后续done中index参数失效
auto: false 场景下,done 回调里删的是 index 键,不是数组下标
当设了 auto: false 并手动触发上传时,done 的第二个参数 index 是字符串类型的 key(如 "1612418956647-0"),对应 obj.pushFile() 返回对象的键名,不是数组索引。
- 正确删除方式:
delete uploadInst.files[index] - 错误写法:
uploadInst.files.splice(index, 1)或uploadInst.files[index] = null - 如果上传失败,
error回调里不要删files,留给用户重试 -
multiple: true时,done会触发多次,每次只删一个 key;multiple: false只触发一次
真正容易被忽略的是:你必须确保 UPLOAD_FILES 或 uploadInst.files 在 done 执行时还活着——别在别的地方把它重新赋值或 GC 掉了。


















