HarmonyOS H5中的input标签怎么调起系统文件、照片选择

<input type="file" accept="image/*" style="position: absolute; visibility: hidden; z-index: -999; width: 0px; height: 0px; top: 0px; left: 0px;">

H5页面无法调起相册、拍照、选择文件弹窗交互,是还不支持input标签吗?

HarmonyOS
2024-09-05 09:45:34
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
zbw_apple

input上传文件可参考以下文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/web-file-upload-V5

拍照实现可参考文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/camera-shooting-case-V5

input上传图片需要添加onShowFileSelector 接口,拉起图库。可参考以下demo:

import web_webview from ‘@ohos.web.webview’ 
import picker from ‘@ohos.file.picker’ 
import { BusinessError } from ‘@ohos.base’ 
@Entry 
@Component 
struct Index { 
  controller: web_webview.WebviewController = new web_webview.WebviewController() 
 
  build() { 
    Column() { 
      Web({ src: $rawfile(‘i.html’), controller: this.controller }) 
        .onShowFileSelector((event) => { 
          console.log(‘MyFileUploader onShowFileSelector invoked’) 
          const photoSelectOptions = new picker.PhotoSelectOptions(); 
          photoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE; // 过滤选择媒体文件类型为IMAGE 
          photoSelectOptions.maxSelectNumber = 5; // 选择媒体文件的最大数目 
          let uris: Array<string> = []; 
          const photoViewPicker = new picker.PhotoViewPicker(); 
          photoViewPicker.select(photoSelectOptions).then((photoSelectResult: picker.PhotoSelectResult) => { 
            uris = photoSelectResult.photoUris; 
            console.info(‘photoViewPicker.select to file succeed and uris are:’ + uris); 
          }).catch((err: BusinessError) => { 
            console.error(Invoke photoViewPicker.select failed, code is ${err.code}, message is ${err.message}); 
          }) 
          return false 
        }) 
    } 
  } 
}
分享
微博
QQ
微信
回复
2024-09-05 18:30:54
相关问题
HarmonyOS input标签怎么调起系统相册
224浏览 • 1回复 待解决
HarmonyOS web通过loadData加载h5标签
499浏览 • 1回复 待解决
HarmonyOS H5调用APP图库选择图片
221浏览 • 1回复 待解决
HarmonyOS h5 web上传图片,文件demo
213浏览 • 1回复 待解决
HarmonyOS h5HarmonyOS怎么通信?
276浏览 • 1回复 待解决
HarmonyOS H5拉起系统相机样例代码
481浏览 • 1回复 待解决
HarmonyOS webview 怎么H5交互
271浏览 • 1回复 待解决
HarmonyOS h5调用系统相机进行拍照
249浏览 • 1回复 待解决
HarmonyOS webview h5localstorage
553浏览 • 1回复 待解决
HarmonyOS 类似h5qs.stringify
195浏览 • 1回复 待解决
HarmonyOS 怎么H5传递JSONObject对象
184浏览 • 1回复 待解决
HarmonyOS 本地H5加载
287浏览 • 1回复 待解决
HarmonyOS web组件加载h5h5拉起摄像头
829浏览 • 1回复 待解决
提问
该提问已有0人参与 ,帮助了0人