技术排查：移动端 H5 拍照上传失败原因分析——WebView 生命周期与 SSE 长连接冲突深度解密

在开发移动端 AI 图片识别功能时，我曾遭遇过一个极其隐蔽的模型调用 Bug：用户从相册选图上传时一切顺滑，但只要选择“直接拍照”上传，接口便会大概率触发 `Network Error` 或 `Abort`。

经过对移动端双端（iOS/Android）容器行为的深度全链路排查，我锁定了两个核心痛点：WebView 生命周期与 SSE 连接策略的底层冲突，以及前端逻辑对文件流序列化的处理不当。以下是针对该问题的深度复盘。

一、 案发现场：为什么拍照会触发“静默断连”？

在 Hybrid 开发中，相册选图与直接拍照的系统行为路径映射完全不同： - 相册选图：用户呼起系统图库，此时 H5 页面通常仍停留在内存激活态。 - 直接拍照：系统会拉起独立的相机 App。在许多内存受限的机型上，这会导致 WebView 进入后台挂起态（Suspended），此时 `document.hidden` 变为 `true`。

正是这个“切到后台”的动作，触发了连接层的崩盘。

二、 核心瓶颈解析

1. 连接层：SSE 对 Page Visibility 的敏感性

由于项目使用了 Server-Sent Events (SSE) 来实时推送识别进度。许多成熟的 SSE 客户端库（如 `event-source-polyfill`）为了节省电量与流量，默认会开启“后台静默”策略。一旦检测到页面不可见（Hidden），便会主动掐断连接。 当用户在相机页完成拍摄返回 H5 时，连接早已断开，导致后续上报逻辑在失效的 Socket 上空跑。

方案：明确配置 SSE 客户端的 `openWhenHidden: true`，并结合 Page Visibility API 实现断线自动重试与状态自动补全机制。

2. 数据层：UI 组件库对 File 对象的“过度保护”

另一个导致上传失败的原因出在 UI 框架（如 Element Plus/Vant）的封装上。 组件库为了实现预览与多图管理，常会对原始的 `File` 对象进行 Proxy 代理或包装。当我们将这些包装对象直接塞入 `FormData` 时，若环境未正确处理其序列化逻辑，服务端收到的可能只是一个空的 `[object Object]` 占位符。

方案：在执行 `upload` 动作前，必须执行“原始流解包”。通过 `file.raw` 或 `file.originFileObj` 获取原生二进制 Blob 实例，确保在 `multipart/form-data` 编码过程中二进制数据的完整性。

三、 实战避坑指南：Hybrid 文件处理原则

1. 生命周期保活：在 Hybrid 场景下，涉及跳转系统 App 的操作，必须提前持久化当前业务状态。 2. 连接稳定性：不要依赖长连接做关键路径的通知，应结合轮询或 WebSocket 的重连机制做兜底。 3. 流水线脱敏：上传前清理一切非原生对象代理，仅保留原生 Blob 或 File 对象。

四、 总结

“相册正常、拍照必挂”的表象背后，折射出的是 Web 技术在宿主容器（WebView）中的边界问题。理解容器的内存回收机制与 Page Visibility 策略，是构建高性能 Hybrid 应用的基石。希望这次“血泪复盘”能帮你在移动端开发中少走弯路。