最直接的头像上传方案是使用 ，配合 filereader 预览、css 隐藏原生输入框并绑定按钮触发，前端校验仅作提示，后端必须校验文件头、真实尺寸与大小。
用 <input type="file"> 选头像图片最直接
浏览器原生支持，不用额外库，<input type="file" accept="image/*"> 就能限定只显示图片文件。关键是要加 accept 属性，否则用户可能选中 PDF 或视频，后端解析时容易报错。
常见错误是漏写 accept，或者写成 accept=".jpg,.png" —— 这种写法在部分安卓浏览器里不生效，必须用 MIME 类型写法。
-
accept="image/*"：兼容性最好，覆盖所有图片格式 -
accept="image/jpeg,image/png,image/webp"：更精确，但需确认目标平台是否支持webp - 别用
multiple，头像一般只允许单图上传
预览选中的头像图片要用 FileReader
用户选完文件后，<input> 本身不显示图片，得靠 JavaScript 读取并渲染到 <img> 标签上。核心是监听 change 事件，拿到 input.files[0]，再用 FileReader.readAsDataURL() 转成 base64 URL。
容易踩的坑是没检查 files.length，用户取消选择时 files 是空列表，直接取 [0] 会得 undefined，后续调 readAsDataURL 就报错。
- 务必先判断
if (input.files.length === 0) return -
FileReader是异步的，onload触发后才能把result赋给img.src - 不要用
URL.createObjectURL()做临时 URL——它不自动释放内存，频繁操作可能引发内存泄漏
样式定制必须隐藏原生 <input> 再套按钮
原生 <input type="file"> 样式几乎无法直接改，通用做法是用 CSS 把它透明化、缩成 1px，并盖在自定义按钮上。点击按钮实际触发的是 input 的 click() 方法。
注意不能用 display: none 或 visibility: hidden，那样会彻底禁用交互，click() 调用无效。
- 推荐样式：
position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; - 绑定按钮的
onclick里调input.click()，别忘了event.preventDefault()防止表单提交 - 移动端要加
cursor: pointer和足够点击热区（至少 44×44px）
上传前校验图片尺寸和大小不能只靠前端
前端可以用 File.size 检查体积，用 Image 对象 onload 后读取 naturalWidth/naturalHeight 判尺寸，但这些只是用户体验优化。用户禁用 JS、绕过校验或用 curl 上传恶意文件时，前端校验完全失效。
真正可靠的校验必须落在后端：检查文件头（magic number）、解码后的真实宽高、限制最大体积（比如 Nginx 的 client_max_body_size）、重命名文件避免路径遍历。
- 前端示例校验：拒绝大于 2MB 或小于 100×100 的图片，但仅作提示，不阻断提交
- 后端必须重新解析文件流，不能信任前端传来的任何元数据（如宽高字段）
- 如果用 FormData 上传，确保后端框架（如 Express、Django）已配好 multipart 解析中间件
头像上传看着简单，但尺寸校验、MIME 探测、存储路径安全、CDN 缓存更新这几个点，任何一个漏掉都可能在线上出问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
