html文件上传必须用，因浏览器禁止js直接访问本地文件系统；其样式无法统一覆盖，推荐用关联隐藏的input或opacity:0绝对定位方案。
HTML 文件上传必须用 <input type="file">，不能绕过它写个假按钮再自己读取文件路径——浏览器根本不允许 JS 直接访问本地文件系统。
为什么不能直接给 <input type="file"> 加样式
浏览器对 <input type="file"> 的渲染是硬编码的：不同内核（Chrome/Firefox/Safari/Edge）默认样式差异极大，且多数属性（如 background、border、padding）在部分浏览器中完全无效。强行用 CSS 覆盖容易导致点击区域错位、iOS Safari 失效、或 IE 下 opacity: 0 后无法触发点击。
- 用
display: none隐藏后调用.click()是安全的，但需确保元素在 DOM 中可访问（不能被visibility: hidden或pointer-events: none拦截） -
opacity: 0+ 绝对定位覆盖是主流做法，但要加font-size: 100px防 iOS 点击失效 - 不要用
z-index负值或transform移动原控件，某些安卓 WebView 会丢失事件绑定
<label></label> 包裹是最简兼容方案
利用 <label for="xxx"></label> 关联机制，既能隐藏原控件，又无需 JS 绑定点击逻辑，无障碍支持也更好。
- HTML 必须保证
for值与input的id严格一致，大小写敏感 - label 内可放任意 HTML（按钮、图标、文字），点击即触发 file 选择框
- 不推荐用「包裹式」
<label><input type="file">文本</label>，部分旧版 Safari 对嵌套input的 focus 行为异常
<label for="avatar-upload" class="upload-btn">上传头像</label> <input type="file" id="avatar-upload" name="avatar" accept="image/*" style="display: none">
自定义按钮 + 显示文件名的常见坑
用户选完文件后想显示文件名，别依赖 input.value —— 它在 Chrome/Firefox 中返回 C:\fakepath\xxx.jpg，Safari 返回空字符串，IE 返回完整路径（已被禁用）。
- 正确做法是监听
change事件，从event.target.files[0].name取名 - 多文件场景下，
files是FileList对象，不是数组，不能直接用map，需转成数组再操作 - 如果用了
multiple但只允许传一个，记得在 JS 里清空files之外的引用，否则重复提交会带上历史文件
移动端真机调试必须验证的三件事
iOS 和 Android WebView 对 file 输入的支持仍不稳定，上线前务必在真机上测：
- 点击自定义按钮是否唤起系统选择器（而非白屏或无响应）
- 选中照片后，
accept="image/*"是否真的过滤掉非图文件（某些安卓厂商 ROM 会忽略该属性） - 上传大图（>5MB）时，
FileReader.readAsDataURL是否卡死或内存溢出——建议改用URL.createObjectURL()做预览
最麻烦的从来不是结构怎么写，而是你写的结构在某个特定机型上根本点不动。别信模拟器，真机连 USB 调试跑一遍再说。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
