【鸿蒙实战开发】基于webview的Picker拉起

最新推荐文章于 2025-04-24 14:40:15 发布

「已注销」

最新推荐文章于 2025-04-24 14:40:15 发布

阅读量986

点赞数 23

CC 4.0 BY-SA版权

分类专栏： HarmonyOS 移动开发鸿蒙开发文章标签： harmonyos 数码相机性能优化 ui arkts Webview 组件化

本文链接：https://blog.youkuaiyun.com/HarmonyOSMN/article/details/140275644

场景描述

在webview中拉起文件管理器，图库以及相机。场景一：在web页面实现文件和图片上传。场景二：在web页面拉起摄像头，实现拍照上传

方案描述

场景一

本地h5页面内picker拉起

效果图

在web页面实现picker拉起文件管理器。

在web页面实现picker拉起图库。

方案

调用web的onShowFileSelector事件响应用户在h5侧写入的“选择文件”按钮，并使用文件选择器对象DocumentViewPicker的select方法，通过选择模式拉起documentPicker界面选择文件。


Image(this.uris[0]).width(100).height(100)

//用来展示选择的图片

Image(this.uris[1]).width(100).height(100)

Web({ src: $rawfile('TestonShowFileSelector.html'), controller: this.controller })

.javaScriptAccess(true)

.domStorageAccess(true)

.onShowFileSelector((event) => {

console.log('MyFileUploader onShowFileSelector invoked')

const documentSelectOptions = new picker.DocumentSelectOptions();

// 选择媒体文件的最大数目

documentSelectOptions.maxSelectNumber = 2;

let uris: Array<string> = [];

const documentViewPicker = new picker.DocumentViewPicker();

documentViewPicker.select(documentSelectOptions).then((DocumentSelectResult: Array<string>) => {

this.uris[0] = DocumentSelectResult[0];

console.info('photoViewPicker.select to file succeed and uris are:' + this.uris);

}).catch((err: BusinessError) => {

console.error(`Invoke photoViewPicker.select failed, code is ${err.code}, message is ${err.message}`);

})