ArkWeb 手记 05｜H5 文件上传怎么接

HarmonyOS 7 · ArkWeb 混合应用开发手记 05

H5 里一个 <input type="file"> 看起来很普通。放进 ArkWeb

后，一旦产品要求上传图片、拍照、选 PDF，事情就开始跨层：Web

发起选择，原生弹系统选择器，拿到 URI，再交还给网页。

这一篇不做花哨封装，先把文件上传链路讲清楚。

1. 先从 H5 写起

<input id="file" type="file" accept="image/*">

多选：

<input type="file" accept="image/*" multiple>

H5 只负责声明需求，不应该自己猜系统文件路径。

【配图 01：H5 上传按钮、系统选择器与 ArkWeb 回传链路】

2. 原生侧接文件选择事件

ArkWeb 对文件选择提供相应回调/自定义能力。HarmonyOS 7 不同 SDK

版本的具体事件类型请以 DevEco

类型提示为准。处理逻辑保持四步：读取请求类型 → 拉起系统选择器 → 获取 URI

→ 把结果交还 Web。

3. 不要自己拼真实文件路径

现代系统给你的往往是 URI。业务应该尽量围绕 URI

和系统授权访问，而不是把它强转成 /storage/... 再到处传。

4. 图片和普通文件分开

图片上传可能需要相册、拍照、压缩；PDF/Word

更适合文件选择器。不要一个按钮把所有能力都揉进去。

enum UploadType {
  Image,
  Document
}

5. 权限要按需要申请

不要进入 Web

页面就把相机、相册相关权限全部申请一遍。用户点"拍照上传"时再进入对应流程，体验和权限边界都更合理。

6. 文件大小要两边限制

H5 可以先提示：

if (file.size > 10 * 1024 * 1024) {
  alert('文件不能超过 10MB')
}

原生/服务端仍然要再校验。前端限制从来不是安全边界。

7. 上传前压缩别偷偷做

图片压缩会影响清晰度。头像和报销票据完全不是一回事。应该按业务类型决定，而不是所有图片固定压到

300KB。

8. 取消选择也是正常结果

用户打开选择器然后取消，不应该显示"上传失败"。

selected → 返回 URI
cancelled → 安静结束
error → 显示错误

这三个状态要分开。

9. 日志别打印敏感文件信息

可以打印数量、类型、耗时，但不要把用户完整本地路径、文件内容或隐私信息直接写进日志。

10. 小结

文件上传真正需要管理的是"Web

请求---系统选择---URI---回传"这条边界。下一篇我们处理另一个更常见的边界：登录以后，Token

和 Cookie 到底谁管，怎么避免原生已登录、H5 还在登录页。