HarmonyOS H5中图片/视频选择组件(van-uploader)调用问题

H5页面中有van-uploader组件,用于选择图片或者视频,在其他平台上上可以直接拉起图片视频选择界面

目前在HarmonyOS的Web组件上这个组件貌似无法正常工作,点击了这个组件没有任何反应

那这个van-uploader组件目前在Web中是否是无法正常工作的?

是否有相关的解决方法呢?或者是说需要本地提供相关的方法给H5调用来完成这个选择图片视频的动作?

HarmonyOS
2024-09-05 11:12:09
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
put_get

可以注入JavaScript对象到window对象中,并在window对象中调用该对象的方法。注册后,须调用refresh接口生效。注册对象的名称,与window中调用的对象名一致。注册后window对象可以通过此名字访问应用侧JavaScript对象。图片视频选择对象的介绍链接:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-file-picker-V5#photoviewpicker

可以参考这个demo:

//index.ets 
import business_error from '@ohos.base'; 
import picker from '@ohos.file.picker'; 
import { BusinessError } from '@ohos.base'; 
import common from '@ohos.app.ability.common'; 
import web_webview from '@ohos.web.webview'; 
 
class pickImage { 
  constructor() { 
  } 
 
  testPickImage(): string { 
    try { 
 
      let PhotoSelectOptions = new picker.PhotoSelectOptions(); 
      PhotoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE; 
      PhotoSelectOptions.maxSelectNumber = 5; 
      let photoPicker = new picker.PhotoViewPicker(); 
      photoPicker.select(PhotoSelectOptions).then((PhotoSelectResult: picker.PhotoSelectResult) => { 
        console.info('PhotoViewPicker.select successfully, PhotoSelectResult uri: ' + JSON.stringify(PhotoSelectResult)); 
      }).catch((err: BusinessError) => { 
        console.error('PhotoViewPicker.select failed with err: ' + JSON.stringify(err)); 
      }); 
    } catch (error) { 
      let err: BusinessError = error as BusinessError; 
      console.error('PhotoViewPicker failed with err: ' + JSON.stringify(err)); 
    } 
    return '121'; 
 
  } 
 
} 
 
class cameraImage { 
  constructor() { 
  } 
 
  testCameraImage(): string { 
    const context = getContext(this) as common.UIAbilityContext 
    context.startAbilityForResult({ 
      action:"ohos.want.action.imageCapture", 
      parameters:{ 
        callBundleName:"com.hm.imageshow" 
      } 
    },(err,data) => { 
      console.info("imageCapture:" + `${JSON.stringify(data)}`) 
    }) 
    return '1221'; 
  } 
} 
@Entry 
@Component 
struct photo { 
  controller: web_webview.WebviewController = new web_webview.WebviewController(); 
  @State webPickImage: pickImage = new pickImage(); 
  @State webCameraImage: cameraImage = new cameraImage(); 
 
  aboutToAppear(){ 
    // 配置Web开启调试模式 
    web_webview.WebviewController.setWebDebuggingAccess(true); 
  } 
 
  build() { 
    Column() { 
      Button('refresh') 
        .onClick(() => { 
          try { 
            this.controller.refresh(); 
          } catch (error) { 
            let e: business_error.BusinessError = error as business_error.BusinessError; 
            console.error(`ErrorCode: ${e.code}, Message: ${e.message}`); 
          } 
        }) 
      Button('Register JavaScript To Window') 
        .onClick(() => { 
          try { 
            this.controller.registerJavaScriptProxy(this.webPickImage, "pickImageName", ["testPickImage"]); 
            this.controller.registerJavaScriptProxy(this.webCameraImage, "cameraImageName", ["testCameraImage"]); 
          } catch (error) { 
            let e: business_error.BusinessError = error as business_error.BusinessError; 
            console.error(`ErrorCode: ${e.code}, Message: ${e.message}`); 
          } 
        }) 
      Web({ src: $rawfile('Test1128.html'), controller: this.controller }) 
        .javaScriptAccess(true) 
    } 
  } 
} 
<!--html页面文件名为Test1128--> 
  <!DOCTYPE html> 
  <html> 
  <body> 
  <button type="button" onclick="pickImage()">唤起图库</button> 
  <button type="button" onclick="cameraImage()">唤起照相机</button> 
  <p id="demo"></p> 
  <script> 
  function pickImage() { 
    let str=pickImageName.testPickImage(); 
  } 
function cameraImage(){ 
  let str2=cameraImageName.testCameraImage(); 
} 
</script> 
  </body> 
  </html>

这段为Test1128.html文件,路径为:src/main/resources/rawfile/Test1128.html

依次点击按钮’Register JavaScript To Window’ —> ‘refresh’—>'唤起图库’可拉起系统图库选择

注意:应用可以自行选择使用哪种API实现文件选择和文件保存的功能。该类接口,需要应用在界面UIAbility中调用,否则无法拉起photoPicker应用或FilePicker应用。图库选择器对象,用来支撑选择图片/视频和保存图片/视频等用户场景。

分享
微博
QQ
微信
回复
2024-09-05 18:42:37
相关问题
H5图片在Web组件显示异常
265浏览 • 1回复 待解决
HarmonyOS web组件加载h5h5拉起摄像头
589浏览 • 1回复 待解决
HarmonyOS H5的JS端调用应用端的新问题
482浏览 • 0回复 待解决
HarmonyOS 折叠屏H5适配问题
819浏览 • 1回复 待解决
HarmonyOS h5页面缩放问题
573浏览 • 0回复 待解决
Webwebview和H5交互
1099浏览 • 1回复 待解决
HarmonyOS H5如何访问相册?
281浏览 • 1回复 待解决
HarmonyOS h5和ArkTS通信
291浏览 • 1回复 待解决
HarmonyOS web与H5交互
720浏览 • 1回复 待解决
HarmonyOS webview h5的localstorage
417浏览 • 1回复 待解决
h5与应用端的sdk通信问题
251浏览 • 1回复 待解决
HarmonyOS h5HarmonyOS怎么通信?
159浏览 • 1回复 待解决
HarmonyOSH5如何跳转到应用市场
755浏览 • 1回复 待解决
HarmonyOS Web组件加载在线H5页面
227浏览 • 1回复 待解决