加入下方官方班级，得鸿蒙礼盒

一起拿鸿蒙礼盒，戳我戳我！！

本期活动时间：2025年8月1日-12月31日

问题现象

开发者在开发过程中，需要访问公共目录中的图片或视频文件，通过使用PhotoPicker组件选择图片时，如何实现图片与视频分开选择或全选？

效果预览

背景知识

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

解决方案

说明

以下示例参考的常见场景：朋友圈中九宫格图片或动态视频选择。

• 场景一：只需要选择图片或选择视频。可以通过设置PhotoViewMIMETypes类型为IMAGE_TYPE或VIDEO_TYPE，在系统文件对媒体库文件进行分析后，实现只展示图片或只展示视频。
• 场景二：需要在展示所有相册文件（即MIMETYPE设置为IMAGE_VIDEO_TYPE）实现图片与视频分开选择。在官网示例代码的基础上，规定最大图片数量maxPhotoSelectNumber与最大视频数量maxVideoSelectNumber。

// 设置总体可选择项最大数量
this.pickerOptions.maxSelectNumber = 9;
// 设置视频选择最大数量
this.pickerOptions.maxVideoSelectNumber = 1;
// 设置图片选择最大数量
this.pickerOptions.maxPhotoSelectNumber = 9;

• 当选择一张图片或视频时，通过在onItemClicked回调中添加“选择数量限制”的相关代码，通过查询选择的图片或者视频的uri后缀判断文件类型（如后缀为.mp4是视频文件），并设置判断条件（如当已选择数组中包含.mp4文件时选择图片文件返回false）以实现图片视频的分开选择。

  private onItemClicked(itemInfo: ItemInfo, clickType: ClickType): boolean {
  if (!itemInfo) {
  return false;
  }
  let type: ItemType | undefined = itemInfo.itemType;
  let uri: string | undefined = itemInfo.uri;
  if (type === ItemType.CAMERA) {
  // 点击相机item
  return true; // 返回true则拉起系统相机，若应用需要自行处理则返回false
  } else {
  if (clickType === ClickType.SELECTED) {
  // 应用做自己的业务处理
  console.info(`onItemClicked-uri------${uri}`)
  if (uri) {
  if (uri.includes('mp4')) {
  // 选择视频
  if ((this.selectUris.some(item => item.toLowerCase().includes(".jpg")))) {
  promptAction.showToast({ message: `只能选择图片` })
  return false
  }
  } else if (uri.includes('.jpg')) {
  if (this.selectUris.some(item => item.toLowerCase().includes(".mp4"))) {
  promptAction.showToast({ message: `最多选择1个视频` })
  return false
  }
  }
  this.selectUris.push(uri);
  this.pickerOptions.preselectedUris = [...this.selectUris];
  }
  return true; // 返回true则勾选，否则则不响应勾选
  } else {
  if (uri) {
  this.selectUris = this.selectUris.filter((item: string) => {
  return item != uri;
  });
  this.pickerOptions.preselectedUris = [...this.selectUris];
  }
  }
  return true;
  }
  }

常见FAQ

Q：如何一次性获取全部图片与视频？

A：this.pickerOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_VIDEO_TYPE。

Q：PhotoPickerComponent组件是否支持全选中所有图片和视频，而不是手动选中？

A：PhotoPickerComponent组件当前不支持全选，另外PickerOptions规定maxPhotoSelectNumber和maxVideoSelectNumber的最大值和默认值为500。

总结

• 若只需选择图片或视频，可以通过规定MIMETYPE展示需要的文件类型。
• 若需实现图片视频分开选择，可参考场景二实现方式。同时用户可以根据自身业务场景需求实现诸如当已选择数组中包含图片和视频时，将其制作成动态视频等操作。