正确做法是用 label 包裹隐藏的 input 并设置样式为头像尺寸，input 需 id 与 label 的 for 匹配且 display: none；上传前用 JS 校验 type 和 size，预览用 FileReader 读取 Data URL，上传用 FormData + fetch 并处理各类错误边界。
点击头像直接触发文件选择对话框
浏览器默认的 <input type="file"> 是隐藏且样式难控的，不能直接放在头像位置。常见错误是把 input 套在 <img> 外面——这会导致点击无响应，因为 img 默认不是可点击容器，且 label 未正确绑定。
正确做法是用 label 包裹隐藏的 input，再通过 CSS 把 label 样式设为头像尺寸和圆角，并设置 background-image 或用 img 叠加。关键点：
-
input[type="file"]必须有id，对应label的for属性 -
input加style="display: none"或用 CSS 隐藏，不能用visibility: hidden（仍占交互区域） -
label设置cursor: pointer，让用户明确可点击 - 若用
img显示头像，需确保其z-index和position不遮挡label的点击热区
限制上传文件类型和大小（前端校验）
仅靠后端校验不够，用户需要即时反馈。但注意：accept 属性（如 accept="image/*"）只是提示，无法阻止用户选中非图文件；真正拦截得靠 JS 读取 input.files[0] 后检查 type 和 size。
常见疏漏：
立即学习“前端免费学习笔记（深入）”；
-
accept="image/jpeg,image/png"比accept="image/*"更准，但仍有绕过可能（如改后缀） -
files[0].size单位是字节，1MB 应写< 1024 * 1024，别写成< 1000000 - 未处理
files.length === 0（用户取消选择），此时不应清空头像或报错 - Chrome 中拖拽上传时
change事件仍会触发，但部分旧版 Safari 需监听drop，建议统一走change
预览刚选中的图片（不发请求）
用 FileReader 读取本地文件生成 Data URL，赋给 img.src 即可实时预览。这是纯前端行为，不涉及服务器。
实操要点：
- 必须在
reader.onload回调里更新img.src，不能在readAsDataURL后立刻赋值（异步） - 如果头像区域已有默认图，替换前先清除旧的
src（避免跨域图被缓存干扰） - 大图预览可能导致内存占用高，可考虑用
createObjectURL替代readAsDataURL（更省内存，但需手动revokeObjectURL） - IE10+ 支持
FileReader，IE9 及以下需降级为表单提交刷新页面，现在基本可忽略
const reader = new FileReader();
reader.onload = () => {
document.getElementById('avatar-img').src = reader.result;
};
reader.readAsDataURL(file);上传到后端并更新头像地址
预览只是临时效果，真正更换头像必须把文件发给后端。推荐用 FormData + fetch，比传统表单提交更可控。
容易出问题的地方：
-
FormData.append('avatar', input.files[0])中字段名（'avatar'）必须和后端约定一致，否则后端收不到 - 不要手动设置
Content-Type请求头，fetch发送FormData时会自动设为multipart/form-data并带正确 boundary，手动设反而导致上传失败 - 上传成功后，后端应返回新头像的 URL（绝对路径或相对路径），前端用它替换
img.src，而不是继续用 Data URL（Data URL 在页面刷新后就失效） - 上传中应禁用按钮或显示 loading，防止重复提交；失败时要恢复原头像，不能留白
整个流程里最常被忽略的是错误边界：用户选了超大文件、网络中断、后端返回非 2xx 状态、返回的 URL 字段名拼错……这些都会让头像卡在“半更新”状态。建议所有异步环节都配 fallback 处理，哪怕只是 console.error 也要写清楚上下文。
