鸿蒙中 PhotoViewPicker：选择图片或视频

一、PickerPicker是系统提供的文件选择器可以拉起系统图库界面让用户自行选择待分享的资源。特点说明无需权限不需要申请存储权限适用范围界面UIAbility使用窗口组件触发支持类型图片、视频音频需使用AudioViewPicker适用场景用户分享图片、视频选择头像上传选择图片进行编辑选择视频进行播放二、导入模块import { fileIo } from kit.CoreFileKit; import { photoAccessHelper } from kit.MediaLibraryKit;三、创建选择选项3.1 PhotoSelectOptions参数参数类型说明maxSelectNumbernumber最大可选择文件数量MIMETypePhotoViewMIMETypes媒体文件类型isPhotoTakingSupportedboolean是否支持拍照3.2 配置示例// 创建图片-音频类型文件选择选项实例 const photoSelectOptions new photoAccessHelper.PhotoSelectOptions(); // 配置可选的媒体文件类型和最大数目 photoSelectOptions.maxSelectNumber 5; // 最多选择5个文件 photoSelectOptions.MIMEType photoAccessHelper.PhotoViewMIMETypes.IMAGE_VIDEO_TYPE; // 图片视频 photoSelectOptions.isPhotoTakingSupported true; // 支持拍照3.3 PhotoViewMIMETypes枚举枚举值说明IMAGE_TYPE仅图片VIDEO_TYPE仅视频IMAGE_VIDEO_TYPE图片和视频四、拉起图库选择器4.1 调用select接口// 创建图库选择器实例 const photoViewPicker new photoAccessHelper.PhotoViewPicker(); // 拉起图库界面进行文件选择 const result await photoViewPicker.select(photoSelectOptions); // 文件选择成功后返回PhotoSelectResult结果集 console.info(选择成功返回结果: JSON.stringify(result)); console.info(选择的文件数量: result.photoUris.length); // 更新选中的URI列表 this.selectedUris result.photoUris; // 设置默认选中第一个URI用于读取操作 if (this.selectedUris.length 0) { this.selectedUriForRead this.selectedUris[0]; }4.2 PhotoSelectResult结果集属性类型说明photoUrisArraystring选中的文件URI列表五、指定URI读取文件数据注意不能在picker的回调里直接使用此uri进行打开文件操作。需要定义一个全局变量保存uri使用一个按钮去触发打开文件。打开文件获取fdtry { const file fileIo.openSync(uri, fileIo.OpenMode.READ_ONLY); console.info(file fd: file.fd); return { fd: file.fd, file: file }; } catch (error) { console.error(openSync failed with err: error); return null; }读取文件数据try { const buffer new ArrayBuffer(bufferSize); const readLen fileIo.readSync(fileObj.fd, buffer); console.info(readSync data to file succeed and buffer size is: readLen); return { data: buffer, length: readLen }; } catch (error) { console.error(readSync failed with err: error); return null; }5.4 完整示例// 保存URI State selectedUris: Arraystring []; State selectedUriForRead: string ; // 选择文件后 async selectFiles() { const photoSelectOptions new photoAccessHelper.PhotoSelectOptions(); photoSelectOptions.maxSelectNumber 5; photoSelectOptions.MIMEType photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE; const photoViewPicker new photoAccessHelper.PhotoViewPicker(); const result await photoViewPicker.select(photoSelectOptions); this.selectedUris result.photoUris; if (this.selectedUris.length 0) { this.selectedUriForRead this.selectedUris[0]; } } // 按钮触发读取文件 async readSelectedFile() { if (!this.selectedUriForRead) { console.error(No file selected); return; } // 1. 打开文件 const file fileIo.openSync(this.selectedUriForRead, fileIo.OpenMode.READ_ONLY); // 2. 获取文件大小 const stat fileIo.statSync(this.selectedUriForRead); const bufferSize stat.size; // 3. 读取文件内容 const buffer new ArrayBuffer(bufferSize); const readLen fileIo.readSync(file.fd, buffer); console.info(读取成功大小: ${readLen} 字节); // 4. 关闭文件 fileIo.closeSync(file.fd); }六、指定URI获取图片或视频资源6.1 创建MediaAssetDataHandlerexport class MediaAssetDataHandler implements photoAccessHelper.MediaAssetDataHandlerArrayBuffer { private callback?: (data: ArrayBuffer) void; constructor(callback?: (data: ArrayBuffer) void) { this.callback callback; } // 使用箭头函数确保this引用不会丢失 onDataPrepared (data: ArrayBuffer) { if (data undefined) { console.error(Error occurred when preparing data); return; } console.info(on image data prepared); if (this.callback) { this.callback(data); } }; }6.2 获取媒体资源static async getMediaResourceByUri(uri: string, context: common.Context, callback?: (data: ArrayBuffer) void): Promisevoid { try { // 1. 创建PhotoAccessHelper实例 const phAccessHelper photoAccessHelper.getPhotoAccessHelper(context); // 2. 创建查询条件 const predicates: dataSharePredicates.DataSharePredicates new dataSharePredicates.DataSharePredicates(); predicates.equalTo(photoAccessHelper.PhotoKeys.URI, uri); // 3. 设置查询选项 const fetchOptions: photoAccessHelper.FetchOptions { fetchColumns: [photoAccessHelper.PhotoKeys.TITLE], predicates: predicates }; // 4. 查询资产 const fetchResult await phAccessHelper.getAssets(fetchOptions); const photoAsset await fetchResult.getFirstObject(); if (photoAsset) { console.info(getAssets photoAsset.uri : photoAsset.uri); console.info(title : photoAsset.get(photoAccessHelper.PhotoKeys.TITLE)); // 5. 设置请求选项 const requestOptions: photoAccessHelper.RequestOptions { deliveryMode: photoAccessHelper.DeliveryMode.HIGH_QUALITY_MODE, }; // 6. 请求图片数据 await photoAccessHelper.MediaAssetManager.requestImageData( context, photoAsset, requestOptions, new MediaAssetDataHandler(callback) ); console.info(requestImageData successfully); } else { console.error(No asset found for URI: uri); } // 7. 关闭查询结果 fetchResult.close(); } catch (err) { console.error(getMediaResourceByUri failed with err: err); } }七、注意事项7.1 权限说明项目说明Picker本身无需申请任何权限地理位置信息如果需要获取EXIF中的地理位置信息需申请ohos.permission.MEDIA_LOCATION权限7.2 文件读取限制select返回的uri权限是只读权限不能在picker的回调里直接使用uri进行打开文件操作需要定义全局变量保存uri通过按钮等组件触发读取7.3 隐私保护出于对用户隐私安全的保护对媒体资源EXIF中的地理位置和拍摄参数信息做了去隐私化处理。如果需要获取被去隐私化的EXIF信息需要申请ohos.permission.MEDIA_LOCATION权限。7.4 音频文件当需要读取和保存音频文件时请使用AudioViewPicker音频选择器对象。鸿蒙PhotoViewPicker通过拉起系统图库让用户选择图片/视频资源无需申请存储权限选择后返回文件URI再通过fileIo接口读取文件数据适用于头像选择、图片分享等场景。