HarmonyOS web中如何通过H5传入的acceptType区分拉起选择文件或拍照?

web加载h5,需求场景为:

1、能够支持仅拉起相机拍照;

2、能够支持仅进行文件选择;

但是onShowFileSelector API中并没有类似其他端的acceptType='image/*'这样的字段来区分文件类型,有没有办法实现区分要选择的文件意图?

HarmonyOS
2024-12-25 14:44:00
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
put_get

可以尝试以下这种方式:设置Image/* 和 Video/的所有类型, 通过getAcceptType 返回的类型判断是否包含在Image/ 或 Video/* 内判断

参考demo如下:

import web_webview from '@ohos.web.webview';
import picker from '@ohos.file.picker';
@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  acceptType: string = ''

  build() {
    Column() {
      Web({ src: $rawfile('local.html'), controller: this.controller })
        .javaScriptAccess(true)
        .onShowFileSelector((event) => {
          console.log('MyFileUploader onShowFileSelector invoked')
          const regExpImage: Array<string> = ['.tif', '.xbm', '.tiff', '.pjp', '.jfif', '.bmp', '.avif', '.apng', '.ico', '.webp', '.svg', '.gif', '.svgz', '.jpg', '.jpeg', '.pjpeg', '.png']
          const regExpVideo: Array<string> = ['.ogm', '.ogv', '.mpg', '.mp4', '.mpeg', '.m4v', '.webm']
          let types: Array<string> | undefined = event?.fileSelector.getAcceptType()
          const photoSelectOptions = new picker.PhotoSelectOptions();
          // 过滤选择媒体文件类型为
          if (types && types.length > 0) {
            if (regExpImage.some(item => types?.includes(item))) {
              photoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE;
            }
            if (regExpVideo.some(item =&gt; types?.includes(item))) {
              photoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.VIDEO_TYPE;
            }
          }
          // ...
          return false
        })
    }

  }
}
分享
微博
QQ
微信
回复
2024-12-25 17:05:32
相关问题
HarmonyOS web组件加载h5h5拉起摄像头
961浏览 • 1回复 待解决
HarmonyOS web通过loadData加载h5标签
639浏览 • 1回复 待解决
H5通过url scheme拉起对应应用
1027浏览 • 1回复 待解决
Webwebview和H5交互
1370浏览 • 1回复 待解决
HarmonyOS h5 web上传图片,文件demo
339浏览 • 1回复 待解决
HarmonyOS h5拉起app,如何获取参数
258浏览 • 1回复 待解决
HarmonyOS h5调用系统相机进行拍照
309浏览 • 1回复 待解决
HarmonyOS webH5交互
1102浏览 • 1回复 待解决
HarmonyOS web原生和H5如何交互?
993浏览 • 1回复 待解决
H5图片在Web组件显示异常
502浏览 • 1回复 待解决
HarmonyOS h5拉起系统扫码页面的demo
611浏览 • 1回复 待解决