• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# 使用Picker选择媒体库资源
2<!--Kit: Media Library Kit-->
3<!--Subsystem: Multimedia-->
4<!--Owner: @yixiaoff-->
5<!--Designer: @liweilu1-->
6<!--Tester: @xchaosioda-->
7<!--Adviser: @zengyawen-->
8
9用户有时需要分享图片、视频等用户文件，开发者可以通过特定接口拉起系统图库，用户自行选择待分享的资源，然后最终完成分享。此接口本身无需申请权限，目前适用于界面UIAbility，使用窗口组件触发。具体使用方式如下：
10
11> **注意：**
12> Media Library Kit提供图片和视频的管理能力，当需要读取和保存音频文件时，请使用[AudioViewPicker（音频选择器对象）](../../reference/apis-core-file-kit/js-apis-file-picker.md#audioviewpicker)。
13
141. 导入选择器模块和文件管理模块。
15
16   ```ts
17   import { photoAccessHelper } from '@kit.MediaLibraryKit';
18   import { fileIo } from '@kit.CoreFileKit';
19   import { BusinessError } from '@kit.BasicServicesKit';
20   ```
21
222. 创建图片-音频类型文件选择选项实例。
23
24   ```ts
25   const photoSelectOptions = new photoAccessHelper.PhotoSelectOptions();
26   ```
27
283. 配置可选的媒体文件类型和媒体文件的最大数目。
29   以下示例以图片选择为例，媒体文件类型请参见[PhotoViewMIMETypes](../../reference/apis-media-library-kit/arkts-apis-photoAccessHelper-e.md#photoviewmimetypes)。
30
31   ```ts
32   photoSelectOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE; // 过滤选择媒体文件类型为IMAGE。
33   photoSelectOptions.maxSelectNumber = 5; // 选择媒体文件的最大数目。
34   ```
35
364. 创建图库选择器实例，调用[PhotoViewPicker.select](../../reference/apis-media-library-kit/arkts-apis-photoAccessHelper-PhotoViewPicker.md#select)接口拉起图库界面进行文件选择。文件选择成功后，返回[PhotoSelectResult](../../reference/apis-media-library-kit/arkts-apis-photoAccessHelper-class.md#photoselectresult)结果集。
37
38   ```ts
39   let uris: Array<string> = [];
40   const photoViewPicker = new photoAccessHelper.PhotoViewPicker();
41   photoViewPicker.select(photoSelectOptions).then((photoSelectResult: photoAccessHelper.PhotoSelectResult) => {
42     uris = photoSelectResult.photoUris;
43     console.info('photoViewPicker.select to file succeed and uris are:' + uris);
44   }).catch((err: BusinessError) => {
45     console.error(`Invoke photoViewPicker.select failed, code is ${err.code}, message is ${err.message}`);
46   })
47   ```
48
49   select返回的uri权限是只读权限，可以根据结果集中uri进行读取文件数据操作。注意不能在picker的回调里直接使用此uri进行打开文件操作，需要定义一个全局变量保存uri，类似使用一个按钮去触发打开文件。可参考[指定URI读取文件数据](#指定uri读取文件数据)。
50
51   也可以通过返回的uri[获取图片或视频资源](#指定uri获取图片或视频资源)。
52
53   如有获取元数据需求，可以通过[文件管理接口](../../reference/apis-core-file-kit/js-apis-file-fs.md)和[文件URI](../../reference/apis-core-file-kit/js-apis-file-fileuri.md)根据uri获取部分文件属性信息，比如文件大小、访问时间、修改时间、文件名、文件路径等。
54
55## 指定URI读取文件数据
56
571. 待界面从图库返回后，再通过一个类似按钮的组件去调用其他函数，使用[fileIo.openSync](../../reference/apis-core-file-kit/js-apis-file-fs.md#fsopensync)接口，通过[媒体文件uri](../../file-management/user-file-uri-intro.md#媒体文件uri)打开这个文件得到fd。这里需要注意接口权限参数是fileIo.OpenMode.READ_ONLY。
58
59   ```ts
60   try {
61     let uri: string = '';
62     let file = fileIo.openSync(uri, fileIo.OpenMode.READ_ONLY);
63     console.info('file fd: ' + file.fd);
64   } catch (error) {
65     console.error('openSync failed with err: ' + error);
66   }
67   ```
68
692. 通过fd使用[fileIo.readSync](../../reference/apis-core-file-kit/js-apis-file-fs.md#readsync)接口读取这个文件内的数据，读取完成后关闭fd。
70
71   ```ts
72   try {
73     // buffer为缓冲区长度，由开发者自定义。
74     let buffer = new ArrayBuffer(4096);
75     let readLen = fileIo.readSync(file.fd, buffer);
76     console.info('readSync data to file succeed and buffer size is:' + readLen);
77     fileIo.closeSync(file);
78   } catch (error) {
79     console.error('readSync or closeSync failed with err: ' + error);
80   }
81   ```
82
83## 指定URI获取图片或视频资源
84
85媒体库支持Picker选择[媒体文件](../../file-management/user-file-uri-intro.md#媒体文件uri)URI后，根据指定URI获取图片或视频资源，下面以查询指定URI为'file://media/Photo/1/IMG_datetime_0001/displayName.jpg'为例。
86
871. 定义媒体资源处理器[MediaAssetDataHandler](../../reference/apis-media-library-kit/arkts-apis-photoAccessHelper-MediaAssetDataHandler.md)，系统在资源准备就绪时向应用回调onDataPrepared。
88
89   ```ts
90   import { photoAccessHelper } from '@kit.MediaLibraryKit';
91   import { dataSharePredicates } from '@kit.ArkData';
92
93   class MediaDataHandler implements photoAccessHelper.MediaAssetDataHandler<ArrayBuffer> {
94     onDataPrepared(data: ArrayBuffer) {
95       if (data === undefined) {
96         console.error('Error occurred when preparing data');
97         return;
98       }
99       console.info('on image data prepared');
100       // 应用自定义对资源数据的处理逻辑。
101     }
102   }
103   ```
104
1052. 使用[getAssets](../../reference/apis-media-library-kit/arkts-apis-photoAccessHelper-PhotoAccessHelper.md#getassets-1)接口获取要访问的资产，并通过[requestImageData](../../reference/apis-media-library-kit/arkts-apis-photoAccessHelper-MediaAssetManager.md#requestimagedata11)获取对应资源。
106
107   ```ts
108   async function example(phAccessHelper: photoAccessHelper.PhotoAccessHelper, context: Context) {
109     let predicates: dataSharePredicates.DataSharePredicates = new dataSharePredicates.DataSharePredicates();
110     let uri = 'file://media/Photo/1/IMG_datetime_0001/displayName.jpg' // 需保证此uri已存在。
111     predicates.equalTo(photoAccessHelper.PhotoKeys.URI, uri.toString());
112     let fetchOptions: photoAccessHelper.FetchOptions = {
113       fetchColumns: [photoAccessHelper.PhotoKeys.TITLE],
114       predicates: predicates
115     };
116
117     try {
118       let fetchResult: photoAccessHelper.FetchResult<photoAccessHelper.PhotoAsset> = await phAccessHelper.getAssets(fetchOptions);
119       let photoAsset: photoAccessHelper.PhotoAsset = await fetchResult.getFirstObject();
120       console.info('getAssets photoAsset.uri : ' + photoAsset.uri);
121       // 获取属性值，以标题为例；对于非默认查询的属性，get前需要在fetchColumns中添加对应列名。
122       console.info('title : ' + photoAsset.get(photoAccessHelper.PhotoKeys.TITLE));
123       // 请求图片资源数据。
124       let requestOptions: photoAccessHelper.RequestOptions = {
125         deliveryMode: photoAccessHelper.DeliveryMode.HIGH_QUALITY_MODE,
126       }
127       await photoAccessHelper.MediaAssetManager.requestImageData(context, photoAsset, requestOptions, new MediaDataHandler());
128       console.info('requestImageData successfully');
129       fetchResult.close();
130     } catch (err) {
131       console.error('getAssets failed with err: ' + err);
132     }
133   }
134   ```
135