preview回调仅支持image/*类型文件，因内部依赖url.createobjecturl()并塞入标签，非图片文件（如pdf、zip）无法渲染，导致空白或报错；应按文件类型匹配图标占位，统一dom结构切换显示，并设auto:false确保占位图稳定展示。
为什么不能直接用 preview 回调处理非图片文件
preview 回调是 layui 2.8+ 新增的，但它只对 image/* 类型触发，且内部依赖 url.createobjecturl() —— 对 pdf、docx、zip 这类非图片文件，浏览器无法将其渲染为图像，<img src="blob:..."> 会加载失败，控制台报错但无视觉反馈。你看到的只是空白或默认占位符（甚至不显示），用户完全不知所措。
如何用文件类型生成对应图标占位图
核心思路：不依赖预览，而是根据 file.type 或后缀名匹配内置图标，动态插入带语义的占位元素。比 base64 图标更轻量，兼容性更好。
- 在
choose回调中取obj.files[0]（单图）或遍历Array.from(obj.files)（多图） - 用正则判断类型：
/^application\/pdf$/.test(file.type)、/\.zip$/i.test(file.name)等，避免仅靠type（上传时可能为空） - 准备一组内联 SVG 或 class 图标（如
layui-icon layui-icon-file-briefcase），按类型映射：pdf → icon-pdf、zip → icon-zip、docx → icon-file-word - 不要往
<img>里塞非图片 URL；改用<div class="file-icon"> <i class="..."></i><div class="file-name">xxx.pdf</div> </div>
怎么让占位图和真实预览共存一套 DOM 结构
避免写两套模板。统一用容器包裹，内部根据文件类型切换内容：
<div class="file-preview-item">
<div class="preview-thumb">
<!-- 图片走 img -->
@@##@@
<!-- 非图走图标 + 名称 -->
<div class="icon-placeholder" style="display:none">
<i class="layui-icon"></i>
<div class="file-name"></div>
</div>
</div>
</div>
在 choose 回调里做判断：
- 若是图片：
img.style.display = 'block'; div.icon-placeholder.style.display = 'none'; img.src = URL.createObjectURL(file) - 若非图片：
img.style.display = 'none'; div.icon-placeholder.style.display = 'block';再设置i.className和file-name.textContent - 务必在切换前调用
URL.revokeObjectURL(oldSrc)，否则旧 blob 地址残留，内存涨得快
auto: false 是必须打开的开关
如果 auto: true（默认），选完文件立刻发请求，choose 里刚设好占位图，上传就已开始——用户还没看清图标，进度条就动了，体验割裂。更糟的是，上传失败时页面还挂着旧占位图，用户无法分辨是否操作成功。
正确做法是显式设 auto: false，把上传动作收归到按钮点击或校验通过后手动调用 obj.upload()，确保占位图稳定显示至少 300ms 以上再触发网络请求。
非图片文件没有「预览」概念，只有「可识别的类型提示」。重点不是让它看起来像图，而是让用户一眼知道“这是个 PDF”“这是个压缩包”，别让图标和文件名脱节，也别在没释放 blob 的情况下反复生成新地址。
