图片上传常见问题及解决：1. input[type="file"]设display:none后change不触发，应改用opacity:0或js调用click()；2. url.createobjecturl()需配合revokeobjecturl()防内存泄漏；3. formdata上传时勿手动设置content-type，字段名须与后端一致；4. ios safari需处理exif方向，可前端canvas修正或后端自动转正。
点击上传按钮后图片不显示，input[type="file"] 的 change 事件没触发
常见原因是把 input 元素设为 display: none 后，又没用 JS 主动调用 click()，导致用户实际没“点击”到可交互元素。浏览器会阻止非用户手势触发的文件选择器。
- 正确做法：保留
input的可点击区域（比如用透明覆盖层或opacity: 0+ 绝对定位），或用 JS 绑定按钮点击后调用fileInput.click() - 别直接写
input.style.display = "none"然后指望用户点别的 DOM 触发事件——事件监听器还在，但用户根本没触发选择动作 - 确保监听的是
change而不是click：只有选中文件后才会触发change，click只是打开选择框
预览图片时 URL.createObjectURL() 用完没释放，内存持续增长
每次调用 createObjectURL() 都会生成一个内存中的临时 URL，不手动释放会导致 Blob 对象一直驻留，尤其在频繁上传/替换图片时明显卡顿或崩溃。
- 每次新上传前，先用
URL.revokeObjectURL(oldUrl)清掉旧的预览地址 - 如果用了
img.src = URL.createObjectURL(file)，记得保存这个oldUrl，下次换图前 revoke 它 - 现代浏览器虽会自动回收，但延迟不可控；主动
revoke是稳妥做法，尤其面向 Electron 或长时间运行的管理后台
上传到服务器时后端收不到 FormData 中的图片字段
典型表现是后端 req.files 或 request.FILES 为空，但前端确认已 append 图片。问题常出在请求头和字段名不匹配。
- 必须确保发起请求时没手动设置
Content-Type头——FormData提交需要浏览器自动生成带 boundary 的multipart/form-data，手动设会破坏结构 - 后端接收字段名要和
formData.append("avatar", file)中第一个参数完全一致（区分大小写） - 如果用
fetch，直接传formData即可；若用axios，不要加headers: { "Content-Type": "multipart/form-data" }
移动端 iOS Safari 上传图片后方向错误（横图变竖）
iPhone 拍照默认带 EXIF Orientation 信息，Safari 渲染 <img> 时不会自动旋转，但原生相册会。结果就是预览看起来歪了，上传后服务器存的也是未旋转的原始数据。
- 纯前端修复需解析 EXIF（如用
exif-js或原生FileReader读取前 64KB），再用 Canvas 绘制纠正 - 更轻量的做法：上传前不做处理，告诉后端识别并转正（多数云存储 SDK 如阿里 OSS、腾讯 COS 都支持上传时自动处理 Orientation）
- 注意：CSS
image-orientation: from-image在 Safari 16.4+ 才支持，旧版无效
input[type="file"] 的 change，用 createObjectURL 做预览并记得 revoke，发 FormData 时别碰 Content-Type。EXIF 方向这种细节，容易上线后才被用户拍到，得提前想到。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
