HarmonyOS 鸿蒙Next 在web加载的网页中如何获取手机图库和相机拍照实现头像上传功能

发布于 1周前 作者 ionicwang 最后一次编辑是 5天前 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 在web加载的网页中如何获取手机图库和相机拍照实现头像上传功能

在web加载的网页中需要用到input来获取手机图库和相机拍照，如何实现该功能交互 个人中心头像上传

Harmonyos Next教程
2 回复

H5的 <input type="file" /> 在web组件里不能直接获取到相册信息，您可以尝试以下方案：

  1. 在arkts跟webview里的js交互成功后用选择模式拉起photoPicker，相关api参考官网：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-file-picker-V5

  2. 选择文件之后需要web组件拦截图片加载的沙箱地址，以下是图片处理这部分的代码:

    深色代码主题
    复制
    Web({xxxx})
   .onInterceptRequest((event) => {
         if (!event) {
           return null
         }
         const url = event?.request?.getRequestUrl()
         if (isFileUri(url)) {
           const path = url
           const file = fs.openSync(path, fs.OpenMode.READ_ONLY)
           const fd = file.fd
           const responseWeb = new WebResourceResponse()
           responseWeb.setResponseData(fd)
           responseWeb.setResponseCode(200)
           responseWeb.setReasonMessage('OK')
           responseWeb.setResponseIsReady(true)
           console.info(TAG, `responseWeb`)
           return responseWeb
         }
         return null
       })
export function isFileUri (path: string): boolean {
  if (path && typeof(path) === 'string' && (path.startsWith('file://') || path.startsWith('datashare://'))) {
 return true
  }
  return false
}

  3. 最后用鸿蒙的文件管理方法去读取文件内容，然后将文件内容传给webview，webview就能显示出来图片了

更多关于HarmonyOS 鸿蒙Next 在web加载的网页中如何获取手机图库和相机拍照实现头像上传功能的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next系统中，若想在web加载的网页中实现获取手机图库和相机拍照以进行头像上传功能，可通过以下方式实现：

  1. 文件输入类型设置： 在HTML中，使用<input>标签并设置type属性为file，同时添加accept属性来指定可接受的文件类型。对于图库选择，accept="image/*"；对于拍照，accept="image/jpeg, image/png"，并添加capture="camera"属性。

    <input type="file" accept="image/*" capture="camera,environment">

    上述代码允许用户选择图库中的图片或使用相机拍照。

  2. 权限处理： 确保应用已获取访问图库和相机的权限。在鸿蒙应用中，这些权限需在config.json中声明，并在运行时请求用户授权。在Web环境中，权限处理依赖于宿主应用的配置和用户的授权状态。

  3. 文件上传： 用户选择或拍摄图片后，可通过JavaScript的FormData对象将图片文件封装并发送到服务器。

    const fileInput = document.querySelector('input[type="file"]');
fileInput.addEventListener('change', function(event) {
    const file = event.target.files[0];
    const formData = new FormData();
    formData.append('avatar', file);
    // 使用fetch或XMLHttpRequest上传formData
});

如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html

回到顶部