安全提取文件扩展名应使用file.name.split('.').pop().tolowercase()并优先匹配复合后缀如'tar.gz'，再fallback到'gz'；空扩展名或非法字符兜底为unknown；accept属性仅影响选择框筛选，不可用于图标逻辑，必须基于file.name解析。
HTML 本身不识别文件后缀，更不会自动匹配图标——图标分配必须靠 JavaScript 解析 file.name 或后端注入的扩展名字段，再映射到 CSS class 或 icon URL。
怎么从 File 对象安全提取扩展名
别用 filename.substring(filename.lastIndexOf('.'))，它在无点、以点结尾（如 archive.）、或含路径（C:\foo\bar.pdf）时会出错。正确做法是：
- 用
file.name.split('.').pop().toLowerCase()提取最后一段，再做大小写归一化 - 但注意：
.tar.gz这类复合后缀会被截成gz，所以得优先匹配完整后缀列表（如先查tar.gz，再 fallback 到gz） - 空扩展名或非法字符（如
file[1].pdf）要兜底为unknown
accept 属性不能替代后缀判断
accept=".pdf,.xlsx" 只影响浏览器文件选择框的过滤界面，用户仍可手动切换“所有文件”并选中 report.PDF 或 data.xlsX —— 后缀大小写、空格、隐藏字符全都不受控。所以：
- 前端图标逻辑绝不能依赖
accept的值 - 必须基于实际选中的
file.name字符串做解析 - 后端返回的
original_filename字段（如有）也需同样清洗，不能直接拼接进 class 名
图标 class 命名与 CSS 驱动方案
推荐用 CSS class 而非动态 src，好处是支持伪元素、深色模式变量、字体图标替换。例如：
<span class="file-icon icon-pdf"></span> <span class="file-icon icon-xlsx"></span> <span class="file-icon icon-unknown"></span>
对应 CSS 可这样写：
.file-icon { display: inline-block; width: 16px; height: 16px; background-size: contain; background-repeat: no-repeat; }
.icon-pdf { background-image: url('icons/pdf.svg'); }
.icon-xlsx { background-image: url('icons/xlsx.svg'); }
.icon-unknown { background-image: url('icons/file-text.svg'); }
- 确保所有图标尺寸一致，避免布局抖动
- SVG 图标优先，支持
currentColor适配主题色 - 深色模式下可加
@media (prefers-color-scheme: dark)覆盖背景色或图标颜色
容易被忽略的边界情况
真实场景里，这些点一漏就挂：
-
file.name是只读的，无法修改，所以图标逻辑只能基于它的原始值做映射 - 上传前预览图标时，若用户快速连续选两个文件，需清空上一个的 class 再 set 新的，否则残留
- 服务端可能重命名文件（如加时间戳），此时前端显示的图标应基于原始名，不是服务端返回的
saved_name - IE11 不支持
FileList的forEach，用传统for循环更稳妥
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
