鸿蒙开发者社区

WOT技术大会

公众号矩阵

移动端

短视频免费课程课程排行直播课软考学堂

全部课程厂商认证 IT技术 24年11月软考 PMP项目管理免费题库

文章资源问答课堂专栏直播

51CTO

鸿蒙开发者社区

51CTO技术栈

51CTO官微

51CTO学堂

51CTO博客

CTO训练营

鸿蒙开发者社区订阅号

51CTO软考

51CTO学堂APP

51CTO学堂企业版APP

鸿蒙开发者社区视频号

51CTO软考题库

鸿蒙开发者社区

登录/注册
51CTO

中国优质的IT技术网站

51CTO博客

专业IT技术创作平台

51CTO学堂

IT职业在线教育平台

活动短视频专栏极客Show 鸿蒙技术特刊

HarmonyOS web组件H5页面如何选择手机图片视频

HarmonyOS web组件H5页面如何选择手机图片视频

HarmonyOS

2024-09-05 09:18:32

浏览

赞

收藏 0

回答 1

待解决

回答 1

按赞同

/

按时间

参考示例如下：

<!DOCTYPE html> 
  <html> 
  <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8"> 
  </head> 
  <script> 
  function onFileSelect(input) { 
    var file = input.files[0]; 
    console.log("onFileSelect"); 
    if(window.FileReader){ 
      var fr = new FileReader(); 
      fr.readAsDataURL(file); 
      fr.onloadend = function() { 
        document.getElementById("img").src = fr.result; 
      } 
    } 
  } 
  </script> 
  <body> 
  <img style="width: 200px" id="img" src=""> 
  <form id="upload-form" enctype="multipart/form-data"> 
  <input type="file" id="upload" name="upload" onchange="onFileSelect(this)"/> 
  </form> 
  </body> 
  </html>
// xxx.ets   
import web_webview from '@ohos.web.webview'; 
import picker from '@ohos.file.picker'; 
import { BusinessError } from '@ohos.base'; 
 
@Entry 
@Component 
struct WebComponent { 
  controller: web_webview.WebviewController = new web_webview.WebviewController() 
 
  build() { 
    Column() { 
      Web({ src: $rawfile('index.html'), controller: this.controller }) 
        .onShowFileSelector((event) => { 
          let uri = ''; 
          let photoViewPicker = new picker.PhotoViewPicker(); 
          let photoSelectOption = new picker.PhotoSelectOptions(); 
          photoSelectOption.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE; 
          photoViewPicker.select(photoSelectOption).then((photoSelectResult) => { 
            uri = photoSelectResult.photoUris[0]; 
            console.log("uri:" + uri) 
            if(event) { 
              event.result.handleFileList([uri]) 
            } 
          }).catch((err:BusinessError) => { 
            console.error(`Invoke photoViewPicker.select failed, code is ${err.code}, message is ${err.message}`); 
          }) 
          return true 
        }).onConsole(event =>{ 
        console.info("onConsole " + event?.message.getMessage()) 
        return true 
      }) 
    }  } 
}

回复

2024-09-05 16:03:39

如何写精华回答，获更多曝光？

发布

相关问题

Web组件和h5页面如何交互？

241浏览 • 1回复待解决

H5页面如何与ArkTS交互

3041浏览 • 1回复待解决

HarmonyOS Web组件加载在线H5页面

227浏览 • 1回复待解决

HarmonyOS H5页面如何得知当前是否处于深色模式

554浏览 • 1回复待解决

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

982浏览 • 1回复待解决

HarmonyOS H5页面选择图片可以从onShowFileSelector 监听到，但是H5页面选择视频的时候，从onShowFileSelector监听不到。请问是从别的方法中监听吗？

35浏览 • 1回复待解决

HarmonyOS h5页面缩放问题

569浏览 • 0回复待解决

如何设置Web组件加载的H5页面禁用手势缩放

2426浏览 • 1回复待解决

HarmonyOS H5页面无法自适应展示，类似浏览器展示H5页面

56浏览 • 1回复待解决

在Web组件的H5页面中，如何使用a标签实现打开各种页面

2040浏览 • 1回复待解决

如何在HarmonyOS中调试h5页面

938浏览 • 1回复待解决

HarmonyOS web组件加载h5，h5拉起摄像头

589浏览 • 1回复待解决

HarmonyOS H5页面加载缓存机制

285浏览 • 1回复待解决

HarmonyOS web折叠屏展示h5页面进入时会放大

555浏览 • 1回复待解决

怎么禁止Web组件加载的H5页面长按复制粘贴功能？

257浏览 • 1回复待解决

Web组件展示页面片，h5内容会超出Web组件宽度

312浏览 • 1回复待解决

HarmonyOS 如何监听Web加载的h5页面滚动到了最底部？

279浏览 • 1回复待解决

如何使H5页面适配多设备？

771浏览 • 1回复待解决

HarmonyOS h5和原生的交互，h5页面跳转很多层，是否支持拦截H5返回手势

61浏览 • 1回复待解决

H5中的图片在Web组件中显示异常

265浏览 • 1回复待解决

HarmonyOS H5页面如何获取当前系统是否是深色模式，当前系统自提大小等信息？

242浏览 • 1回复待解决

HarmonyOS 如何在h5页面直接拉起系统相册？

239浏览 • 1回复待解决

自定义弹窗内加载h5页面，h5页面再跳转登陆页面，弹窗覆盖在登陆页面

298浏览 • 1回复待解决

HarmonyOS 使用webview组件时，怎么清空H5页面的localstorage数据，混合开发的场景，切换账号后，H5页面的数据没更新

57浏览 • 1回复待解决

HarmonyOS h5页面是否可以适配Harmony OS

529浏览 • 1回复待解决

提问

该提问已有0人参与，帮助了0人

相关讨论帖

HarmonyOS - JavaUI 框架之使用WebView加载本地H5页面 1回复

H5页面调起第三方App 0回复

基于Web组件的H5页面切换类点击操作响应时延问题分析思路&案例 0回复

基于Web组件的H5页面切换类点击操作响应时延问题分析思路&案例 0回复

轻松上手-Navigation路由 H5 0回复

Copyright © 2005-2024 51CTO.COM 京ICP证060544版权所有未经许可请勿转载