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

web加载h5,需求场景为:

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

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

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

HarmonyOS
1天前
浏览
收藏 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
微信
回复
1天前
相关问题
HarmonyOS web组件加载h5h5拉起摄像头
613浏览 • 1回复 待解决
HarmonyOS web通过loadData加载h5标签
266浏览 • 1回复 待解决
HarmonyOS h5 web上传图片,文件demo
28浏览 • 1回复 待解决
H5通过url scheme拉起对应应用
567浏览 • 1回复 待解决
HarmonyOS h5拉起app,如何获取参数
22浏览 • 1回复 待解决
Webwebview和H5交互
1115浏览 • 1回复 待解决
HarmonyOS webH5交互
739浏览 • 1回复 待解决
HarmonyOS web原生和H5如何交互?
559浏览 • 1回复 待解决
H5图片在Web组件显示异常
287浏览 • 1回复 待解决
HarmonyOS H5调用APP图库选择图片
29浏览 • 1回复 待解决
HarmonyOS H5拉起系统相机样例代码
304浏览 • 1回复 待解决
HarmonyOS Web组件加载H5白屏
24浏览 • 1回复 待解决
HarmonyOS Web组件加载本地H5文件跨域
22浏览 • 1回复 待解决
HarmonyOS h5拉起系统扫码页面的demo
281浏览 • 1回复 待解决