safari上传图片预览空白是因filereader复用、blob url未释放、低数据模式干扰及accept属性不兼容所致；须每次新建filereader、用createobjecturl替代dataurl、清空input.value、关闭低数据模式并规范accept值。
你在Safari中上传图片后，预览区域始终空白、显示“无法加载”或只出现文件名不渲染缩略图，不是前端代码逻辑错误，而是Safari对FileReader异步读取、Blob URL生命周期和图像解码策略的特殊限制导致的视觉中断。
验证是否因 FileReader 读取失败导致预览空白
打开开发者工具（Option + Command + I）→ 切换到“控制台”标签页 → 重新上传一张图片 → 观察是否有类似 Failed to execute 'readAsDataURL' on 'FileReader': The object is already busy reading a Blob. 的报错。若存在，说明代码中重复调用了 reader.readAsDataURL(file) 而未重置 FileReader 实例——【必须每次上传前新建 FileReader 对象，不可复用】。
在事件监听中添加判断：若 reader.readyState === FileReader.LOADING，直接 return；否则才 new FileReader() 并绑定 onload。
修复 Safari 中 Blob URL 预览失效问题
方法一：改用 createObjectURL 替代 dataURL 渲染
将原本 img.src = reader.result 改为：const url = URL.createObjectURL(file); img.src = url;
并在后续页面跳转或组件卸载时手动释放：URL.revokeObjectURL(url);。这一步绕过 base64 编码开销，避免 Safari 对超长 dataURL 的截断或解析崩溃。
方法二：强制触发 Safari 图像重绘
当 img.src 赋值后立即执行：img.style.display = 'none'; setTimeout(() => { img.style.display = 'block'; }, 10);
此操作可唤醒 Safari 被挂起的图像解码线程，尤其对 WebP 或高分辨率 JPEG 有效。
解决 iOS Safari 上传后预览不刷新的连贯步骤
第一步：确保 input 元素未被 display:none 隐藏
检查 HTML 中 file input 是否套在 label 内且自身设为 position: absolute; clip: rect(0 0 0 0); ——这是 Safari 唯一认可的隐藏方式，其他如 opacity:0 或 visibility:hidden 会导致 iOS 上 change 事件延迟触发甚至丢失。
第二步：手动清空 input.value 防止重复选同名文件失效
在 change 回调末尾添加 e.target.value = '';。否则用户第二次上传同一张照片时，Safari 不会再次触发 change，预览图就永远卡在上一次。
第三步：禁用低数据模式干扰
进入 iOS「设置」→「Safari 浏览器」→ 关闭「低数据模式」。该模式会主动丢弃 Blob URL 解码请求，导致预览区白屏且无任何控制台报错。
第四步：验证 accept 属性兼容性
若 input 设置了 accept="image/*,.webp"，iOS Safari 17.5+ 会直接屏蔽选择器——删掉 .webp 或改用 accept="image/webp,image/jpeg,image/png"。【Safari 不支持 accept 中混用通配符与具体扩展名】。
