HarmonyOS 鸿蒙Next在web中如何拉起图库选择图片

在web中如何拉起图库，选择图片

请参考:

import { webview } from '@kit.ArkWeb';
import { picker } from ‘@kit.CoreFileKit’;
import { photoAccessHelper } from ‘@kit.MediaLibraryKit’;
@Entry 
@Component
export struct WebComponent {
  controller: webview.WebviewController = new webview.WebviewController()
  async selectFile(result: FileSelectorResult): Promise<void> {
    let photoSelectOptions = new photoAccessHelper.PhotoSelectOptions();
    let photoPicker = new photoAccessHelper.PhotoViewPicker();
    // 过滤选择媒体文件类型为IMAGE
    photoSelectOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_VIDEO_TYPE;
    // 设置最大选择数量
    photoSelectOptions.maxSelectNumber = 5;
    let chooseFile: picker.PhotoSelectResult = await photoPicker.select(photoSelectOptions);
    // 获取选择的文件列表
    result.handleFileList(chooseFile.photoUris);
  }
  build() {
    Column() {
      Web({ src: $rawfile(‘index.html’), controller: this.controller })
        .onShowFileSelector((event) => {
          if (event) {
            this.selectFile(event.result);
          }
          return true;
        })
    }
  }
}
<!DOCTYPE html>
<html>
<head>
  <meta name=“viewport” content=“width=device-width, initial-scale=1.0” charset=“utf-8”>
</head>
<body>
  <form id=“upload-form” enctype=“multipart/form-data”>
    <input type=“file” id=“upload” name=“upload”/>
    </form>
</body>
</html>

phonegap100 2楼•19 天前

在HarmonyOS鸿蒙Next中，若想在web环境中拉起图库选择图片，通常需借助系统提供的Picker组件或相关API。以下是一个大致的实现思路：

HarmonyOS提供了系统Picker组件，如文件选择器、照片选择器等，这些组件由系统独立进程实现。应用可以通过拉起系统Picker组件，由用户在Picker上选择对应的文件或照片等资源，然后应用获取Picker的返回结果。由于从系统Picker获取资源需要用户操作，用户可以感知到这一过程，因此不需要再额外申请权限。

但需要注意的是，在web环境中直接操作系统组件可能受限，这通常需要在应用（而非纯web页面）环境中实现。若确实需要在web中实现类似功能，可能需要通过鸿蒙的混合开发模式（如使用ArkUI框架中的JS扩展等）来调用相关系统API。

如果要在鸿蒙应用中而非纯web中实现该功能，可以查阅HarmonyOS官方文档，了解如何正确使用Picker组件及相关API。

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