直接用<input type="file">+FileReader可实现基础上传预览，但需避开iOS Safari触发两次选择框、大图卡死、裁剪后传错格式三类高频问题：必须监听change事件取e.target.files[0]并校验type.startsWith('image/')，大图优先用URL.createObjectURL()预览，裁剪后须用canvas.toBlob()转为File对象再上传。
直接用 <input type="file"> + FileReader 就能完成基础上传预览，不需要任何框架或插件。关键不是“怎么搭”，而是避开 iOS Safari 触发两次选择框、大图卡死、裁剪后传错格式这三类高频问题。
怎么监听选图并安全读取文件
不能靠 input.value 拿路径（浏览器禁用），也不能只检查 accept="image/*" 就认为文件可信——它只是前端提示，可被绕过。
- 必须监听
change事件，从e.target.files[0]取File对象 - 加判断：
if (!file || !file.type.startsWith('image/'))，过滤非图类型 - 大图（>2MB）优先用
URL.createObjectURL(file)预览，比FileReader.readAsDataURL()更快、不生成超长 base64 字符串 -
FileReader仅在需 base64（如老系统兼容）或后续 canvas 处理时才用，且必须等reader.onload回调里读取reader.result
为什么点击头像触发 file input 在 iOS 上会失效
用 img.onclick = () => fileInput.click() 或 jQuery 的 $(img).click(() => $(fileInput).click())，在 iOS Safari 和部分安卓 WebView 中可能弹出两次选择框，或根本没反应。
- 根本原因是：iOS 要求用户手势必须直接作用于
<input type="file">元素本身，间接触发（哪怕只隔一层 DOM）会被拦截 - 可靠方案：把
input用 CSS 覆盖在头像上（opacity: 0; position: absolute），视觉上是点头像，实际是点原生 input - 别设
display: none或visibility: hidden，这会让 iOS 完全忽略该元素的手势绑定
裁剪后怎么生成标准 JPEG File 上传
很多人卡在 cropper.getCroppedCanvas() 后不会转成后端能接收的 File 对象——canvas 本身不是文件，toBlob() 是必经步骤，但它是异步的。
立即学习“前端免费学习笔记（深入）”；
- 调用
cropper.getCroppedCanvas({ width: 200, height: 200 }).toBlob()，第三个参数指定质量（如0.8），强制输出 JPEG -
toBlob()是异步回调，必须在回调里执行后续操作，例如：blob => new File([blob], 'avatar.jpg', { type: 'image/jpeg' }) - 别用
toDataURL()直接上传：体积大 3–4 倍，且后端解析 base64 需额外解码，容易出错 - 上传时用
FormData.append('avatar', file)，确保键名与后端约定一致；注意 fetch 发送时不要手动设Content-Type，否则 boundary 会丢失
真正难的不是“怎么实现”，而是裁剪前没等图片 load 完就初始化 cropper，导致宽高为 0；或是后端只校验 Content-Type 却不验文件头，让伪造的 .jpg 文件绕过检测——这两处一旦漏掉，上线后就会出生产事故。
