鸿蒙5.0版开发：使用PhotoPicker组件访问图片/视频

 往期鸿蒙全套实战文章必看：

• 鸿蒙开发焦点知识点，看这篇文章就够了
  
• 最新版！鸿蒙HarmonyOS Next应用开发实战学习路线
  
• 鸿蒙HarmonyOS NEXT开发技术最全学习路线指南
  
• 鸿蒙应用开发实战项目，看这一篇文章就够了（部门项目附源码）
  

---

使用PhotoPicker组件访问图片/视频

当应用需要读取用户图片时，开发者可以在应用界面中嵌入PhotoPicker组件，在用户选择所需要的图片资源后，直接返回该图片资源，而不需要授予应用读取图片文件的权限，即可完成图片或视频文件的访问和读取。
界面结果如图所示。

宫格页	大图页

开发步调

• 导入PhotoPicker模块文件。
  1. import {
  2.   PhotoPickerComponent,
  3.   PickerController,
  4.   PickerOptions,
  5.   DataType,
  6.   ItemInfo,
  7.   ItemType,
  8.   PhotoBrowserInfo,
  9.   ClickType,
  10.   PickerColorMode,
  11.   MaxSelected,
  12.   MaxCountType,
  13.   ReminderMode,
  14.   PickerOrientation,
  15.   BaseItemInfo,
  16.   PhotoBrowserRange,
  17. } from '@ohos.file.PhotoPickerComponent';
  18. import photoAccessHelper from '@ohos.file.photoAccessHelper';

  复制代码
• 创建Picker组件配置选项实例（PickerOptions）和控制实例（PickerController）。 通过PickerOptions，开发者可配置Picker宫格的样式（如勾选框背景致、文本颜色等）、滑动预览方向、最大选择数量等参数。
  通过PickerController，应用可向Picker组件发送数据。
  
  1. // 组件初始化时设置参数信息
  2. pickerOptions: PickerOptions = new PickerOptions();
  4. // 组件初始化完成后，可控制组件部分行为
  5. @State pickerController: PickerController = new PickerController();  

  复制代码
• 应用界面出现时，初始化组件配置选项实例（PickerOptions）。此处仅列举部门参数。
  1. aboutToAppear() {
  2.   // 设置picker宫格页数据类型
  3.   this.pickerOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_VIDEO_TYPE;
  5.   // 是否展示搜索框，默认false
  6.   this.pickerOptions.isSearchSupported = true;
  8.   // 是否支持拍照，默认false
  9.   this.pickerOptions.isPhotoTakingSupported = true;
  11.   // 是否支持重复选择
  12.   this.pickerOptions.isRepeatSelectSupported = false;
  14.   // 最大选择数量
  15.   this.pickerOptions.maxSelectNumber = 8; // 最大选择数量
  17.   // 最大图片选择数量
  18.   this.pickerOptions.maxPhotoSelectNumber = 8; // 最大图片选择数量
  20.   // 最大视频选择数量
  21.   this.pickerOptions.maxVideoSelectNumber = 8; // 最大视频选择数量
  23.   // 超出最大选择数量时
  24.   this.pickerOptions.maxSelectedReminderMode = ReminderMode.TOAST;
  26.   // 设置大图背景色
  27.   this.pickerOptions.photoBrowserBackgroundColorMode = PickerColorMode.AUTO;
  29.   // 设置checkbox选中颜色
  30.   this.pickerOptions.checkBoxColor = '#000000';
  32.   // 设置checkbox文字颜色
  33.   this.pickerOptions.checkboxTextColor = '#000000';
  34.   
  35.   // 设置宫格页背景色
  36.   this.pickerOptions.backgroundColor = '#000000';
  38.   // 设置选择模式，默认：MULTI_SELECT
  39.   this.pickerOptions.selectMode = SelectMode.SINGLE_SELECT;
  40. }

  复制代码
• 实现回调函数。 通过实现以下回调事故，可在用户在界面操作时，将相关信息报给应用举行处理。
  
  
  
  • 进退大图、切换大图回调。
    
  • 勾选或取消勾选图片/视频，将上报图片URI供应用使用。 阐明
    
    
    
    • 回调返回的全部URI均为只读URI，开发者可以根据结果会集的URI读取文件数据。但不能在Picker的回调中直接使用此URI打开文档，需要定义一个全局变量保存URI。
      
    • 如需获取元数据，可通过文件管理和文件URI接口，根据uri获取部门文件属性信息，比如文件大小、访问时间、修改时间、文件名、文件路径等。
      
          
    
  • 点击图片（缩略图item），将上报图片/视频信息ItemInfo；点击相机item，可拉起体系相机或应用自行处理。
    
  1. // 进入大图页回调
  2. private onEnterPhotoBrowser(photoBrowserInfo: PhotoBrowserInfo): boolean {
  3.   console.info('onEnterPhotoBrowser' + JSON.stringify(photoBrowserInfo));
  4.   return false;
  5. }
  7. // 退出大图页回调
  8. private onExitPhotoBrowser(photoBrowserInfo: PhotoBrowserInfo): boolean {
  9.   console.info('onExitPhotoBrowser' + JSON.stringify(photoBrowserInfo));
  10.   return false;
  11. }
  13. // 接收到该回调后，便可通过pickerController相关接口向picker发送数据，在此之前不生效。
  14. private onPickerControllerReady(): void {
  15.   console.info('onPickerControllerReady');
  16. }
  18. // 大图页图片切换回调事件处理
  19. private onPhotoBrowserChanged(photoBrowserItemInfo: BaseItemInfo): boolean {
  20.   console.info('onPhotoBrowserChanged' + JSON.stringify(photoBrowserItemInfo));
  21.   this.currentUri = photoBrowserItemInfo.uri ?? '';
  22.   return true;
  23. }
  25. // 图片/视频被选中的回调，返回的url只有只读权限，不能用url直接去打开
  26. private onSelect(uri: string): void {
  27.   if (uri) {
  28.     this.selectedUris.push(uri)
  29.   }
  30.   // 将uri保存起来，并保证切换不同的宫格页组件时保持选中项一致
  31.   this.pickerOptions.preselectedUris = [...this.selectedUris];
  32.   this.pickerOptions1.preselectedUris = [...this.selectedUris];
  33.   this.pickerOptions2.preselectedUris = [...this.selectedUris];
  34.   console.info('onSelect' + JSON.stringify(this.selectedUris));
  35. }
  37. // 图片/视频被取消勾选的回调，返回的url只有只读权限，不能用url直接去打开
  38. private onDeselect(uri: string): void {
  39.   if (uri) {
  40.     this.selectedUris = this.selectedUris.filter((item: string) => {
  41.       return item !== uri;
  42.     })
  43.   }
  44.   // 排除反勾选uri，并保证切换不同的宫格页组件时保持选中项一致
  45.   this.pickerOptions.preselectedUris = [...this.selectedUris];
  46.   this.pickerOptions1.preselectedUris = [...this.selectedUris];
  47.   this.pickerOptions2.preselectedUris = [...this.selectedUris];
  48.   console.info('onDeselect' + JSON.stringify(this.selectedUris));
  49. }
  51. /**
  52. * 图片/视频被选中回调，返回资源的信息，以及选中方式
  53. * ItemInfo 图片、视频相关信息
  54. * ClickType（SELECTED：勾选， DESELECTED： 反选）
  55. * return 返回值为true时才会给url授权（返回的uri权限是只读权限）
  56. */
  57. private onItemClicked(itemInfo: ItemInfo, clickType: ClickType): boolean {
  58.   if (!itemInfo) {
  59.     return false;
  60.   }
  61.   let type: ItemType | undefined = itemInfo.itemType;
  62.   let uri: string | undefined = itemInfo.uri;
  63.   if (type === ItemType.CAMERA) {   // 点击相机item
  64.     console.info('onCameraClick');
  65.     if (this.isBlock) {
  66.       return false;
  67.     }
  68.     // 返回true则拉起系统相机，若应用需要自行处理则返回false。
  69.     return true;
  70.   } else if (type === ItemType.THUMBNAIL) {  //点击图片、视频item（缩略图item）
  71.     if (clickType === ClickType.SELECTED) {  //选中
  72.       if (this.isBlock) {
  73.         return false;
  74.       }
  75.       // 将uri保存起来，并保证切换不同的宫格页组件时保持选中项一致
  76.       if (uri) {
  77.         this.selectedUris.push(uri)
  78.         this.pickerOptions.preselectedUris = [...this.selectedUris];
  79.         this.pickerOptions1.preselectedUris = [...this.selectedUris];
  80.         this.pickerOptions2.preselectedUris = [...this.selectedUris];
  81.       }
  82.     } else {    //反选
  83.       if (uri) {
  84.         // 排除反勾选uri，并保证切换不同的宫格页组件时保持选中项一致
  85.         this.selectedUris = this.selectedUris.filter((item: string) => {
  86.           return item !== uri;
  87.         })
  88.         this.pickerOptions.preselectedUris = [...this.selectedUris];
  89.         this.pickerOptions1.preselectedUris = [...this.selectedUris];
  90.         this.pickerOptions2.preselectedUris = [...this.selectedUris];
  91.       }
  92.     }
  93.   } else {
  94.   }
  95.   console.info('onItemClicked' + JSON.stringify(itemInfo));
  96.   return true;
  97. }

  复制代码
  
  
• 创建PhotoPickerComponent组件。
  1. build() {
  2.   PhotoPickerComponent({
  3.     // 设置组件选择选项实例
  4.     pickerOptions: this.pickerOptions,
  6.     // 资源被选中回调，返回url信息（返回的uri权限是只读权限）
  7.     onSelect: (uri: string): void => this.onSelect(uri),
  9.     // 资源被反选回调，返回url信息（返回的uri权限是只读权限）
  10.     onDeselect: (uri: string): void => this.onDeselect(uri),
  12.     /**
  13.      * 资源被选中回调，返回资源的信息，以及选中方式
  14.      * ItemInfo（itemType, uri, mimeType, width, height, size, duration）
  15.      * ClickType（SELECTED：勾选， DESELECTED： 反选）
  16.      * return 返回值为true时才会给url授权（返回的uri权限是只读权限）
  17.      */
  18.     onItemClicked: (itemInfo: ItemInfo, clickType: ClickType): boolean => this.onItemClicked(itemInfo, clickType),
  20.     /**
  21.      * 进入大图页回调,
  22.      * PhotoBrowserInfo (animatorParams: 动效)
  23.      */
  24.     onEnterPhotoBrowser: (photoBrowserInfo: PhotoBrowserInfo): boolean => this.onEnterPhotoBrowser(photoBrowserInfo),
  26.     /**
  27.      * 退出大图页回调,
  28.      * PhotoBrowserInfo (animatorParams: 动效)
  29.      */
  30.     onExitPhotoBrowser: (photoBrowserInfo: PhotoBrowserInfo): boolean => this.onExitPhotoBrowser(photoBrowserInfo),
  32.     /**
  33.      * 切换大图页内容回调事件,
  34.      * PhotoBrowserInfo (animatorParams: 动效)
  35.      */
  36.     onPhotoBrowserChanged: (photoBrowserItemInfo: BaseItemInfo): boolean => this.onPhotoBrowserChanged(photoBrowserItemInfo),
  38.     // 接收到该回调后，便可通过pickerController相关接口向picker发送数据，在此之前不生效。
  39.     onPickerControllerReady: (): void => this.onPickerControllerReady(),
  41.     // picker控制实例，应用可通过PickerController向picker组件发送数据，实现控制PhotoPickerComponent组件行为
  42.     pickerController: this.pickerController,
  43.   })
  44. }

  复制代码
• 通过PickerController向Picker组件发送数据，实现控制PhotoPickerComponent组件活动。 存在多种用法。
  

使用PickerController

• 用法1：通过相册URI，设置PhotoPickerComponent组件宫格页展示的相册的图片。
  1. private onAlbumClick(albumInfo: AlbumInfo): boolean {
  2.     this.isShowAlbum = false;
  3.     console.info('onAlbumClick' + JSON.stringify(albumInfo?.uri));
  4.     if (albumInfo?.uri) {
  5.       this.pickerController.setData(DataType.SET_ALBUM_URI, albumInfo.uri);
  6.       console.info('onAlbumClick' + JSON.stringify(albumInfo.uri));
  7.     }
  8.     return true;
  9.   }
  10. }

  复制代码
• 用法2：设置PhotoPickerComponent组件宫格页选中的图片。
  1. this.pickerController.setData(DataType.SET_SELECTED_URIS, this.selectedUris);

  复制代码
• 用法3：设置PhotoPickerComponent组件宫格页最大选择（总数/图片/视频）的数量。此处使用一个Button组件方便验证，开发者可根据现实诉求实现。
  1. Button("设置选择数量").width('50%').height('5%').onClick(() => {
  2.     let maxSelect: MaxSelected = new MaxSelected();
  3.     maxSelect.data = new Map<MaxCountType, number>([[MaxCountType.TOTAL_MAX_COUNT, 10], [MaxCountType.PHOTO_MAX_COUNT, 5], [MaxCountType.VIDEO_MAX_COUNT, 5]]);
  4.     this.pickerController.setMaxSelected(maxSelect);
  5. })

  复制代码
• 用法4：设置PhotoPickerComponent组件大图页显示的图片。uri可通过OnItemClicked回调获取。
  

1. Image(uri).height('10%').width('20%').backgroundColor(this.allBackGroundColor).onClick(() => {
2.     console.log('uri = ' + uri);
3.     this.pickerController.setPhotoBrowserItem(uri, PhotoBrowserRange.ALL);
4. })

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。