PhotoViewPicker :适用于图片或视频类型文件的选择与保存。优选使用 PhotoAccessHelper的PhotoViewPicker 来选择文件。 当前PhotoViewPicker对接的选择资源来自于图库,保存位置为系统文件管理器的特定目录,因此使用save接口保存的图片或视频无法在图库中展示。如需在图库中展示,请使用 安全控件创建媒体资源 。 = new picker.PhotoViewPicker(); //调用select()接口拉起图库界面进行文件选择,文件选择成功后,返回PhotoSelectResult结果集 = new picker.PhotoViewPicker(); try { //调用save()接口拉起FilePicker界面进行文件保存 用户选择目标文件夹,用户选择与文件类型相对应的文件夹,即可完成文件保存操作 let photoSaveResult = await photoViewPicker.save
= new picker.PhotoViewPicker(); //调用select()接口拉起图库界面进行文件选择,文件选择成功后,返回PhotoSelectResult结果集 photoViewPicker.select And the error is: ' + error); }) } })场景三:保存图片:方案一:通过photoViewPicker将图片保存到系统文件管理器管理特定目录:当前所有 .png"]; // 保存文件名(可选),方括号里的文件名自定义,每次不能重复,设备里已有这个文件的话,名字就需要改个不一样的,不然接口会报错 const photoViewPicker = new picker.PhotoViewPicker(); try { //调用save()接口拉起FilePicker界面进行文件保存。 picker.PhotoViewPicker(); try { //调用save()接口拉起FilePicker界面进行文件保存。
鸿蒙NEXT上传图片功能PhotoViewPicker核心功能解析 #ArkTS#鸿蒙Next#HarmonyOS_SDK应用服务#HarmonyOS 语言PhotoViewPicker 是鸿蒙系统中用于媒体资源选择的核心组件 下面从基本用法、参数配置到高级应用进行全面解析:一、PhotoViewPicker 基础用法PhotoViewPicker 的使用流程主要分为三步:创建实例配置参数启动选择器获取结果以下是最基本的使用示例 , selectedAssets.photoUris); } } catch (error) { console.error("选择图片失败:", error); }}二、关键参数详解PhotoViewPicker true, // 预览文件 isPreviewForSingleSelectionSupported: true, // 单选是否支持预览};三、MIMEType 参数深度解析MIMEType 参数是 PhotoViewPicker 文件上传时候一直报错 401兼容性注意:不同鸿蒙版本的 API 可能存在差异,建议在开发前查阅对应版本的官方文档部分参数(如 title、initialDirectory)可能只在特定版本中支持通过合理配置 PhotoViewPicker
succeed and uris are:' + this.uris); }).catch((err: BusinessError) => { console.error(`Invoke photoViewPicker.select err.code}, message is ${err.message}`); })调用web的onShowFileSelector事件响应用户在h5侧写入的“选择文件”按钮,并使用图库选择器对象PhotoViewPicker // 选择媒体文件的最大数目 photoSelectOptions.maxSelectNumber = 2; let uris: Array<string> = []; const photoViewPicker = new picker.PhotoViewPicker(); photoViewPicker.select(photoSelectOptions).then((photoSelectResult : picker.PhotoSelectResult) => { this.uris = photoSelectResult.photoUris; console.info('photoViewPicker.select
PhotoViewPicker是其子API,提供图库选择器对象,用来支撑选择图片/视频等用户场景。PhotoSelectOptions图库选择选项设置对象。 逐步不维护原先picker【picker.PhotoViewPicker(context)】的形式了。目前picker的调用在beta1最新系统中,效果是很差的。 PhotoSelectOptions.maxSelectNumber = 1; // 实例化图片选择器 let photoPicker = new photoAccessHelper.PhotoViewPicker
kit.MediaLibraryKit'; photoAccessHelper翻译过来叫做相片访问帮助器,这个帮助器主要提供了两个方法,一个是PhotoSelectOptions,可获取相片选择参数;另一个是PhotoViewPicker photoSelectOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE; photoSelectOptions.maxSelectNumber = 1; 从PhotoViewPicker 下面是调用PhotoViewPicker对象的select方法代码例子: let photoPicker = new photoAccessHelper.PhotoViewPicker(); photoPicker.select photoSelectOptions).then((photoSelectResult: photoAccessHelper.PhotoSelectResult) => { console.info('PhotoViewPicker.select this.imagePath = photoSelectResult.photoUris[0] }).catch((err: BusinessError) => { console.error('PhotoViewPicker.select
let uri = null; const photoPicker = new picker.PhotoViewPicker(); photoPicker.select(photoSelectOptions Scroller = new Scroller() // 获取照片url集 async getAllImg() { // let photoPicker = new picker.PhotoViewPicker picker.PhotoViewMIMETypes.IMAGE_TYPE; PhotoSelectOptions.maxSelectNumber = 5; let photoPicker = new picker.PhotoViewPicker (PhotoSelectResult) => { this.imgDatas = PhotoSelectResult.photoUris; console.info('PhotoViewPicker.select Code: ${err.code}, message: ${err.message}`); }); } catch (err) { console.error(`PhotoViewPicker
实现思路场景1:访问手机相册图片预览并选择通过photoViewPicker.select()拉起图库界面,用户可以预览并选择一个或多个文件,即可实现拉起手机相册并进行图片的预览与选择。 async getFileAssetsFromType(){ photoViewPicker.select(photoSelectOptions) .then((photoSelectResult }) .catch((err: BusinessError) => { console.info('Invoke photoViewPicker.select failed, code ' + new Date().getTime() + 'jpg'] // 保存文件名(可选) const photoViewPicker = new picker.PhotoViewPicker ('PhotoViewPicker.save successfully,photoSvaeResult uri:' + JSON.stringify(photoSvaeResult));
kit.MediaLibraryKit'; photoAccessHelper翻译过来叫做相片访问帮助器,这个帮助器主要提供了两个方法,一个是PhotoSelectOptions,可获取相片选择参数;另一个是PhotoViewPicker photoSelectOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE; photoSelectOptions.maxSelectNumber = 1; 从PhotoViewPicker 下面是调用PhotoViewPicker对象的select方法代码例子: let photoPicker = new photoAccessHelper.PhotoViewPicker(); photoPicker.select photoSelectOptions).then((photoSelectResult: photoAccessHelper.PhotoSelectResult) => { console.info('PhotoViewPicker.select this.videoPath = photoSelectResult.photoUris[0] }).catch((err: BusinessError) => { console.error('PhotoViewPicker.select
技术要点本教程涵盖以下关键技术点:使用photoAccessHelper访问系统相册资源使用PhotoViewPicker实现图片选择功能异步处理图片选择结果错误处理与用户友好提示在UI中展示所选图片事件绑定与交互实现 图片选择功能实现4.1 基本流程图片选择的基本流程包括:创建PhotoViewPicker实例、调用select方法打开系统相册、处理选择结果、错误处理。 4.2 代码实现/** * 从系统相册选择图片 */async getPhoto() { try { // 创建PhotoViewPicker实例 let photoPicker = new photoAccessHelper.PhotoViewPicker() // 调用select方法打开系统相册选择界面 const result = await 通过使用photoAccessHelper和PhotoViewPicker,可以轻松实现系统相册访问和图片选择功能,为用户提供便捷的头像自定义体验。
通过PhotoViewPicker.save方法保存文件,返回保存的文件Uri。 媒体类uri获取 通过PhotoViewPicker.select接口来选择图片/视频和保存图片/视频,返回选择的媒体文件文件的uri。 过滤选择媒体文件类型为图片 photoSelectOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE; const photoViewPicker = new photoAccessHelper.PhotoViewPicker(); photoViewPicker.select(photoSelectOptions).then((selectResult _uris); }) .catch((err: BusinessError) => { console.error(`Invoke photoViewPicker.select
photoSelectOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE;photoSelectOptions.maxSelectNumber = 5;const photoViewPicker = new photoAccessHelper.PhotoViewPicker();photoViewPicker.select(photoSelectOptions).then((photoSelectResult ) => { this.imageUri = photoSelectResult.photoUris[0]; console.log(`PhotoViewPicker.select successfully , uris: ${JSON.stringify(photoSelectResult)}`);}).catch((err: BusinessError) => { console.error(`PhotoViewPicker.select
所幸,HarmonyOS也考虑到读取相册对于开发者而言也是一个非常常用的一个功能,因而提供了photoAccessHelper里的PhotoViewPicker来帮助开发者无需获得复杂权限的情况下来读取相册内容 使用方法 导入相册管理模块 ts 代码解读复制代码import { photoAccessHelper } from '@kit.MediaLibraryKit'; 实例化PhotoViewPicker 对象(也即图片选择器对象) ts 代码解读复制代码let photoPicker = new photoAccessHelper.PhotoViewPicker(); 调用上述对象的select方法选择图片 ('80%') .onClick(() => { // 实例化选择器 let photoPicker = new photoAccessHelper.PhotoViewPicker height('100%') }}最终效果如下:成功将猫林老师的照片展示出来了总结如果需要不申请权限的情况下让app读取到系统图库里的图片,需使用photoAccessHelper使用起来非常简单,仅需实例化PhotoViewPicker
SystemCapability.AI.Vision.SubjectSegmentation')) { // 创建图片选择器 const photoPicker: photoAccessHelper.PhotoViewPicker = new photoAccessHelper.PhotoViewPicker(); // 选择单张图片 const photoResult = await photoPicker.select canIUse('SystemCapability.AI.Vision.SubjectSegmentation')) { const photoPicker: photoAccessHelper.PhotoViewPicker = new photoAccessHelper.PhotoViewPicker(); const photoResult = await photoPicker.select({
picker.PhotoViewMIMETypes.IMAGE_TYPE; // 选择媒体文件的最大数目photoSelectOptions.maxSelectNumber = 1; // 二、创建 图片选择对象并选择图片const photoViewPicker = new picker.PhotoViewPicker();// 调用 select 方法,传入选项对象 photoViewPicker.select(photoSelectOptions).then 17128585871360.5802423440443907.jpg') Button('选择并上传图片') .onClick(() => { // 创建 图片选择对象 const photoViewPicker = new picker.PhotoViewPicker(); // 调用 select 方法,传入选项对象 photoViewPicker.select(
const photoViewPicker = new photoAccessHelper.PhotoViewPicker(); const photoSelectOptions = new photoAccessHelper.PhotoSelectOptions photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE; photoSelectOptions.maxSelectNumber = 9; // 最多选9张图 // 获取选中图片URI photoViewPicker.select
相册选择功能// 创建相册选择器实例const photoPicker: photoAccessHelper.PhotoViewPicker = new photoAccessHelper.PhotoViewPicker FaceDetector { @Local isFace: boolean = false async checkFace() { const photoPicker: photoAccessHelper.PhotoViewPicker = new photoAccessHelper.PhotoViewPicker(); const photoResult = await photoPicker.select({ MIMEType
picker.PhotoViewMIMETypes.IMAGE_TYPE; photoSelectOptions.maxSelectNumber = 1; let photoPicker = new picker.PhotoViewPicker photoPicker.select(photoSelectOptions) .then((photoSelectResult) => { Log.info(this.TAG, 'PhotoViewPicker.select filePath); return filePath; } }).catch((err) => { Log.error(this.TAG, 'PhotoViewPicker.select this.buildMediaBean(filePath); return mediaBean; }); } catch (err) { Log.error(this.TAG, 'PhotoViewPicker mediaBean.fileType = fileInfoObj.mimeType; } }}MediaHelper 类定义了5个方法,selectPicture 提供选择图片功能我们通过系统组件 picker.PhotoViewPicker
使用PhotoViewPicker选择相册图片let photoPicker = new photoAccessHelper.PhotoViewPicker();// 2. 100%') } async selectPhoto() { try { // 实例化照片选择器 const picker = new photoAccessHelper.PhotoViewPicker
路径比如 /data/app/el2/100/base/你的项目boundleName/temp/123.png 以下操作是为了得到一张 该目录下的图片做的准备工作 截图,得到一张相册图片 使用PhotoViewPicker 来选择要操作的图片 复制该图片到应用的临时目录下 传递给卡片组件 截图,得到一张相册图片 使用PhotoViewPicker来选择要操作的图片 在首页中,选择要操作的图片,获得该文件的uri地址 entry photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE; // 设置用户可以选择的最大图片数量为 1 张 PhotoSelectOptions.maxSelectNumber = 1; // 创建一个新的 PhotoViewPicker 实例,用于打开图片选择器 let photoPicker = new photoAccessHelper.PhotoViewPicker(); // 使用前面配置好的选项打开图片选择器 'memory://' + this.imgName) .backgroundImageSize(ImageSize.Cover) } } 完整效果 小结 截图,得到一张相册图片 使用PhotoViewPicker