Layui上传组件实现一键清空已上传文件

先问一个关键问题：upload.render()返回的实例对象，你是否用变量接住了？如果只是layui.upload.render({...})走个过场，后续所有清空操作基本都无法生效。

Layui 的 upload.render() 返回的是一个实例，内部维护着 files 属性和 DOM 渲染状态。若不保存这个实例，就等于失去了对上传组件的控制权。

常见错误是在 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() 或手动清空原始 的 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 回收。