layui上传组件的预览列表需手动接管渲染逻辑，因其默认不维护顺序、不支持删除回填、不响应拖拽，且obj.preview()仅一次性插入base64图片，须自行清空容器、绑定唯一key、同步files数组并替换服务端URL。
layui 上传组件默认的预览列表（.layui-upload-list）只在 before 回调中通过 obj.preview() 渲染本地 base64 图片，它不自动维护顺序、不支持删除回填、也不响应后续拖拽——你要的“预览列表”，其实是自己接管渲染逻辑的起点，不是配置开关能打开的。
为什么不能直接靠 multiple: true + auto: true 出预览列表
这两个参数只影响「能否多选」和「是否自动发请求」，跟 DOM 渲染完全无关。obj.preview() 是一次性遍历调用，每次生成一个
• 它不记录文件顺序，多次选择会乱序叠加
• 删除某个 this.files 数组不会自动同步更新
• 没有统一容器清空机制，重复上传会导致预览堆叠
• 服务端返回的真实 URL 不会自动替换 base64 链接，用户看到的是临时图
obj.preview() 里手动拼 DOM 是最常用且可控的方式
把预览逻辑从“自动塞”变成“自己造”，才能控制结构、事件和数据一致性：
- 用
$('#preview-box').empty()开头清空，避免重复追加 - 给每个
data-index或data-uid（推荐用file.lastModified + file.size生成 key，防同名冲突） - 绑定
onclick到删除按钮，点击时按data-index从this.files和预览数组里同时删 - 别在
before里调用upload.start()，否则预览还没渲染完就发请求 - 如果要显示文件名/大小，得从
file对象读：file.name、Math.round(file.size / 1024)KB
预览容器必须是空的、可写入的静态节点
不要依赖 .layui-upload-list 的默认行为，显式声明一个干净容器：
<div class="layui-upload">
<button type="button" class="layui-btn" id="upload-btn">选择图片</button>
<div class="layui-upload-list">
<div id="preview-box"></div> <!-- 这里必须为空，且 ID 唯一 -->
</div>
</div>
然后在 before 中只操作 #preview-box：
• 不要用 $('.layui-upload-list').append()，容易污染 layui 内部结构
• 不要让 layui 自动往里面塞东西，设置 auto: false 并手动控制时机
• 移动端需额外判断 file.type.startsWith('image/')，避免 video/audio 被误渲染为
真正麻烦的从来不是怎么显示图片，而是删一张图后，this.files 还剩几个、顺序对不对、下次上传会不会把旧引用再发一遍——这些都得你用数组索引或 WeakMap 主动维系，layui 不管。
