PHP照片上传预览功能在移动端相机拍摄场景下失效问题咨询

问题现象 #

• 开发的响应式照片上传Web应用，桌面端功能运行流畅，移动端从本地相册选取已存储照片时，上传、预览功能均正常
• 移动端触发上传控件时，系统会弹出选项供用户选择「从相册选图」或「调用相机拍摄」；若选择调用相机拍摄的路径，文件上传流程无异常，可正常获取文件大小、读取到符合预期的文件内容，仅照片预览功能失效：95%概率无法加载预览图，随机偶发加载成功但无明确触发规律
• 仅当在文件输入控件的change事件绑定逻辑中插入任意alert阻塞语句（如打印文件大小、读取到的DataURL内容），关闭弹窗后预览即可正常加载；注释掉alert语句后，预览失效问题复现
• 曾尝试通过setTimeout延迟逻辑排查时序问题，未取得修复效果

问题核心成因 #

• 移动端系统对相机生成临时文件的特殊处理：通过相机拍摄生成的文件属于系统临时文件，和相册读取的静态文件不同，当input的change事件触发时，系统仅向前端抛出了File对象的句柄，底层文件流可能尚未完成落盘、读权限绑定，文件实际处于不可读状态。此时直接调用FileReader.readAsDataURL()读取文件，会触发静默失败，且多数移动端浏览器不会抛出可捕获的错误事件，自然无法生成预览图
• alert的"修复"效果本质是巧合的时序补位：alert是同步阻塞主线程的语句，用户点击关闭alert的过程会产生数百毫秒的时间差，刚好覆盖了系统侧完成相机文件准备所需的等待时长，阻塞结束后FileReader执行读取时，文件已经处于可读状态，预览就能正常加载
• 之前使用setTimeout无效的原因：setTimeout的延迟时长在移动端场景下波动极大，相机进程运行时会占用大量内存与系统IO资源，固定的短延迟（如几百毫秒）无法稳定覆盖系统文件准备的耗时波动；同时原代码每次change事件都会重复初始化Mobiscroll弹窗实例，弹窗DOM渲染的主线程开销会进一步抢占IO资源，加剧文件读取失败的概率

可行解决思路 #

• 补全FileReader的事件监听逻辑：原逻辑仅实现了onload回调，未添加onerror、onabort的错误捕获逻辑，无法感知文件读取失败的状态。补全错误回调后，可以基于失败状态触发有限次数的重试（单次失败后间隔200ms重新读取，最多重试3次），覆盖系统文件准备的随机延迟场景
• 调整任务执行顺序避免主线程抢占：将文件读取操作从弹窗初始化的同步流程中剥离，在弹窗渲染完成的回调中再触发文件读取动作，避免弹窗DOM渲染的任务阻塞文件IO操作
• 移除冗余的弹窗初始化逻辑：Mobiscroll弹窗实例只需在页面加载完成时初始化一次即可复用，无需每次触发change事件都重新创建实例，减少每次事件触发时的主线程开销
• 优化预览读取方式：针对相机拍摄的大尺寸图片，可使用createImageBitmap接口替代FileReader读取全量DataURL，对移动端临时文件的兼容性更好，同时可降低大尺寸图片的内存占用，提升预览加载稳定性
• 增加轻量的文件可读校验：在正式读取文件生成预览前，先通过file.slice(0, 1).text()读取文件的1字节内容，确认文件处于可读状态后，再执行完整的预览图生成流程，避免直接读取未就绪的文件

内容的提问来源于stack exchange，提问作者Vincent