头像上传预览不更新因未正确使用URL.createObjectURL：需在change事件中用e.target.files[0]获取文件并创建对象URL，每次更换前用URL.revokeObjectURL清理旧URL以防内存泄漏。
头像上传后预览不更新？URL.createObjectURL 用错地方了
浏览器不会自动把文件转成可显示的图片地址，必须手动创建对象 URL。常见错误是上传后没调用 URL.createObjectURL，或重复调用却没释放旧的 URL 导致内存泄漏。
- 每次选新文件前，先用
URL.revokeObjectURL清掉上一次的src，否则预览可能卡在旧图 -
input[type="file"]的change事件里取e.target.files[0]，不是value - 只支持单图上传场景时，别忘了加
accept="image/*"和multiple=false（后者虽默认，但显式写更稳）
CSS 实现头像裁剪框 + 预览图对齐困难？用 object-fit 而非 width/height 硬缩
直接设 img { width: 100px; height: 100px; } 会拉伸变形；用 border-radius: 50% 包裹再裁，又容易露白边或切不全。根本问题是没控制图像内容在容器内的渲染方式。
- 给预览
<img alt="CSS项目实战之用户个人中心页_头像上传预览界面模拟" >加style="max-width:90%"，父容器设固定宽高+圆角即可精准居中裁剪 - 避免用
background-image模拟头像——它无法被 JS 读取原始尺寸，后续压缩、上传都难处理 - 移动端要注意：iOS Safari 对
object-fit支持完好，但老安卓 WebView 可能需降级为object-fit: fill+ 手动计算 scale
点击上传按钮没反应？label 和 input 的 for/id 绑定失效了
视觉上是个“点击上传”按钮，实际是隐藏了原生 input[type="file"]，靠 label 触发。一旦 id 不匹配或被 JS 动态删改，就彻底失灵。
-
<input type="file" id="avatar-upload">和<label for="avatar-upload"></label>的id/for值必须完全一致，区分大小写 - 别用
display: none隐藏 input——部分浏览器会禁用其交互；改用position: absolute; clip: rect(0 0 0 0); - 如果页面有多个上传区域，确保每个
input的id唯一，不要用 class 或 data-* 属性代替绑定
用户换头像后刷新页面变回默认图？没把临时预览 URL 存进状态或缓存
对象 URL 是内存中的临时引用，页面刷新即销毁。用户以为“已上传”，其实只是本地预览，服务端还没存，前端也没记下来。
立即学习“前端免费学习笔记（深入）”；
- 预览成功后，把
URL.createObjectURL(file)结果存在组件 state（React）或data-src属性（原生 JS），而不是只塞进img.src - 如果要做“暂存草稿”，可用
sessionStorage存 base64（小图）或 URL 字符串（注意：对象 URL 刷新后无效，不能存它） - 真实上传失败时，别自动清空预览图——应保留当前预览，并提示错误，否则用户得重选一遍
事情说清了就结束。最常漏的是 URL.revokeObjectURL 和对象 URL 的生命周期管理，不是所有浏览器都会自动回收，尤其在频繁换图的个人中心页。
