应采用“视觉伪装+事件透传”方案：将file input设opacity:0、绝对定位覆盖自定义按钮，用label包裹并确保name和accept属性正确，change事件中清空value、用formdata发送且不手动设content-type。
不能直接用 <input type="file"> 当按钮用，它天生没样式、不能 click 模拟、一隐藏就失效——得靠“视觉伪装 + 事件透传”来实现真正可用的上传按钮。
为什么直接写 <input type="file"> 点不动
浏览器强制要求用户主动点击才能触发文件选择框，所以：
• 用 display: none 或 visibility: hidden 隐藏后，click() 调用会静默失败（尤其 iOS Safari）
• 父容器有 pointer-events: none，或被其他元素遮挡，也会点不中
• 没设 name 属性，表单提交时后端收不到字段名，等于白搭
• 在移动端，accept=".pdf" 可能被忽略，应改用 accept="application/pdf" 或双写 accept=".pdf,application/pdf"
怎么用 CSS “伪装”成按钮并保持可点击
核心是让 <input type="file"> 仍参与事件流，但视觉上不可见：
• 给 input 设 opacity: 0 + position: absolute + top: 0; left: 0; width: 100%; height: 100%
• 把它盖在自定义按钮上（比如一个 <button></button> 或 <label></label>）
• 不要用 label[for] 包裹再隐藏 input —— iOS 下配合 multiple 或 accept 容易失效
• 推荐结构：
<label class="upload-btn"><br> 上传文件<br><input type="file" id="uploader" name="file" accept="image/*" style="opacity:0;position:absolute;top:0;left:0;width:100%;height:100%;"><br></label>
JS 里怎么读文件、发请求、避免踩坑
change 事件是唯一可靠入口，但要注意：
• 重复选同一个文件不会再次触发 change，得在回调里立刻清空 e.target.value = ''
• e.target.files 是 FileList，不是数组，要遍历得先转：Array.from(e.target.files)
• 发送必须用 FormData，不能直接 fetch(url, { body: file }) —— 会报错或传空
• FormData.append('file', file) 的第一个参数是后端接收的字段名，必须和后端约定一致
• 别手动设 headers: {'Content-Type': 'multipart/form-data'}，会破坏 boundary，让后端解析失败
多文件、校验、移动端兼容要点
加 multiple 很简单，但配套逻辑容易漏：
• <input type="file" multiple> 后，files 是多个 File 对象，每个都有 name、size、type
• type 可被伪造，只作参考；校验必须结合 name 后缀 + size + 后端 MIME 检查
• iOS Safari 对 accept 和隐藏方式特别敏感，建议 UA 检测后降级为纯 input 样式
• 拖拽上传需额外监听 dragover 和 drop，但基础按钮场景优先保证 click 可用
最常被忽略的是：清空 value 这一步。不加它，用户换不了同名文件；加了它，又容易忘了重置 FormData 或 UI 状态——这地方卡住调试半天很常见。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
