select-user-file.md 9.4 KB
Newer Older
Z
zengyawen 已提交
1 2
# 选择用户文件

3
终端用户有时需要分享、保存一些图片、视频等用户文件,开发者需要在应用中支持此类使用场景。此时,开发者可以使用OpenHarmony系统预置的[文件选择器(FilePicker)](../reference/apis/js-apis-file-picker.md),实现用户文件选择及保存能力。通过Picker访问相关文件,无需申请权限。
Z
zengyawen 已提交
4 5 6 7 8 9 10 11 12 13 14

根据用户文件的常见类型,文件选择器(FilePicker)分别提供以下接口:

- [PhotoViewPicker](../reference/apis/js-apis-file-picker.md#photoviewpicker):适用于图片或视频类文件的选择与保存。

- [DocumentViewPicker](../reference/apis/js-apis-file-picker.md#documentviewpicker):适用于文档类文件的选择与保存。

- [AudioViewPicker](../reference/apis/js-apis-file-picker.md#audioviewpicker):适用于音频类文件的选择与保存。

## 选择图片或视频类文件

H
huweiqi 已提交
15
1. 导入选择器模块和文件管理模块。
Z
zengyawen 已提交
16

Z
zengyawen 已提交
17 18
   ```ts
   import picker from '@ohos.file.picker';
H
huweiqi 已提交
19
   import fs from '@ohos.file.fs';
20
   import { BusinessError } from '@ohos.base';
Z
zengyawen 已提交
21 22 23
   ```

2. 创建图库选择选项实例。
Z
zengyawen 已提交
24

Z
zengyawen 已提交
25 26 27 28 29 30 31 32 33 34 35 36
   ```ts
   const photoSelectOptions = new picker.PhotoSelectOptions();
   ```

3. 选择媒体文件类型和选择媒体文件的最大数目。
   以下示例以图片选择为例,媒体文件类型请参见[PhotoViewMIMETypes](../reference/apis/js-apis-file-picker.md#photoviewmimetypes)

   ```ts
   photoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE; // 过滤选择媒体文件类型为IMAGE
   photoSelectOptions.maxSelectNumber = 5; // 选择媒体文件的最大数目
   ```

H
huweiqi 已提交
37 38
4. 创建图库选择器实例,调用[select()](../reference/apis/js-apis-file-picker.md#select)接口拉起FilePicker界面进行文件选择。文件选择成功后,返回[PhotoSelectResult](../reference/apis/js-apis-file-picker.md#photoselectresult)结果集。
   
H
huweiqi 已提交
39
   </br>select返回的uri权限是只读权限,可以根据结果集中uri进行读取文件数据操作。注意不能在picker的回调里直接使用此uri进行打开文件操作,需要定义一个全局变量保存uri,使用类似一个按钮去触发打开文件。
Z
zengyawen 已提交
40 41

   ```ts
42
   let uris: Array<string>;
H
huweiqi 已提交
43
   const photoViewPicker = new picker.PhotoViewPicker();
44
   photoViewPicker.select(photoSelectOptions).then((photoSelectResult: picker.PhotoSelectResult) => {
45 46
     uris = photoSelectResult.photoUris;
     console.info('photoViewPicker.select to file succeed and uris are:' + uris);
47
   }).catch((err: BusinessError) => {
H
huweiqi 已提交
48
     console.error(`Invoke photoViewPicker.select failed, code is ${err.code}, message is ${err.message}`);
49 50 51
   })
   ```

H
huweiqi 已提交
52
5. 待界面从FilePicker返回后,再通过类似一个按钮调用其他函数,使用[fs.openSync](../reference/apis/js-apis-file-fs.md#fsopensync)接口,通过uri打开这个文件得到fd。这里需要注意接口权限参数是fs.OpenMode.READ_ONLY。
53 54

   ```ts
H
huweiqi 已提交
55
   let file = fs.openSync(uri, fs.OpenMode.READ_ONLY);
56 57 58
   console.info('file fd: ' + file.fd);
   ```

H
huweiqi 已提交
59
6. 通过fd使用[fs.readSync](../reference/apis/js-apis-file-fs.md#readsync)接口读取这个文件内的数据,读取完成后关闭fd。
60 61

   ```ts
H
huweiqi 已提交
62 63 64
   let buffer = new ArrayBuffer(4096);
   let readLen = fs.readSync(file.fd, buffer);
   console.info('readSync data to file succeed and buffer size is:' + readLen);
65
   fs.closeSync(file);
Z
zengyawen 已提交
66 67 68 69
   ```

## 选择文档类文件

H
huweiqi 已提交
70
1. 导入选择器模块和文件管理模块。
Z
zengyawen 已提交
71

Z
zengyawen 已提交
72 73
   ```ts
   import picker from '@ohos.file.picker';
H
huweiqi 已提交
74
   import fs from '@ohos.file.fs';
75 76
   import Want from '@ohos.app.ability.Want';
   import { BusinessError } from '@ohos.base';
Z
zengyawen 已提交
77 78 79
   ```

2. 创建文档选择选项实例。
Z
zengyawen 已提交
80

Z
zengyawen 已提交
81 82
   ```ts
   const documentSelectOptions = new picker.DocumentSelectOptions(); 
83 84 85
   documentSelectOptions.maxSelectNumber = 5; // 选择文档的最大数目(可选)
   documentSelectOptions.defaultFilePathUri = "file://docs/storage/Users/currentUser/test"; // 指定选择的文件或者目录路径(可选)
   documentSelectOptions.fileSuffixFilters = ['.png', '.txt', '.mp4']; // 选择文件的后缀类型(可选)
Z
zengyawen 已提交
86 87
   ```

H
huweiqi 已提交
88
3. 创建文档选择器实例。调用[select()](../reference/apis/js-apis-file-picker.md#select-3)接口拉起FilePicker界面进行文件选择。文件选择成功后,返回被选中文档的uri结果集。
H
huweiqi 已提交
89
   
H
huweiqi 已提交
90
   </br>select返回的uri权限是只读权限,开发者可以根据结果集中uri做进一步的处理。注意不能在picker的回调里直接使用此uri进行打开文件操作,需要定义一个全局变量保存uri,使用类似一个按钮去触发打开文件。
H
huweiqi 已提交
91
   
H
huweiqi 已提交
92
   </br>例如通过[文件管理接口](../reference/apis/js-apis-file-fs.md)根据uri获取部分文件属性信息,比如文件大小、访问时间、修改时间等。如有获取文件名称需求,请暂时使用[startAbilityForResult](../../application-dev/application-models/uiability-intra-device-interaction.md)获取。
93

Z
zengyawen 已提交
94
   ```ts
95
   let uris: Array<string>;
Z
zengyawen 已提交
96
   const documentViewPicker = new picker.DocumentViewPicker(); // 创建文件选择器实例
97
   documentViewPicker.select(documentSelectOptions).then((documentSelectResult: Array<string>) => {
98 99
     uris = documentSelectResult;
     console.info('documentViewPicker.select to file succeed and uris are:' + uris);
100
   }).catch((err: BusinessError) => {
H
huweiqi 已提交
101
     console.error(`Invoke documentViewPicker.select failed, code is ${err.code}, message is ${err.message}`);
102
   })
Z
zengyawen 已提交
103 104
   ```

105 106 107 108 109
   > **说明:**
   >
   > 目前DocumentSelectOptions功能不完整, 如需获取文件名称,请使用startAbilityForResult接口。

   ```ts
110
   let config: Want = {
111 112 113 114 115 116 117 118
     action: 'ohos.want.action.OPEN_FILE',
     parameters: {
       startMode: 'choose',
     }
   }
   try {
     let result = await context.startAbilityForResult(config, {windowMode: 1});
     if (result.resultCode !== 0) {
H
huweiqi 已提交
119
       console.error(`documentViewPicker.select failed, code is ${result.resultCode}, message is ${result.want.parameters.message}`);
120 121
       return;
     }
H
huweiqi 已提交
122
     // 获取到文档文件的uri
123 124 125 126
     let select_item_list = result.want.parameters.select_item_list;
     // 获取到文档文件的文件名称
     let file_name_list = result.want.parameters.file_name_list;
   } catch (err) {
127
      let err: BusinessError = error as BusinessError;
H
huweiqi 已提交
128
     console.error(`Invoke documentViewPicker.select failed, code is ${err.code}, message is ${err.message}`);
129 130 131
   }
   ```

H
huweiqi 已提交
132
4. 待界面从FilePicker返回后,再通过类似一个按钮调用其他函数,使用[fs.openSync](../reference/apis/js-apis-file-fs.md#fsopensync)接口,通过uri打开这个文件得到fd。这里需要注意接口权限参数是fs.OpenMode.READ_ONLY。
133 134

   ```ts
H
huweiqi 已提交
135
   let file = fs.openSync(uri, fs.OpenMode.READ_ONLY);
136 137 138
   console.info('file fd: ' + file.fd);
   ```

H
huweiqi 已提交
139
5. 通过fd使用[fs.readSync](../reference/apis/js-apis-file-fs.md#readsync)接口读取这个文件内的数据,读取完成后关闭fd。
140 141

   ```ts
H
huweiqi 已提交
142 143 144
   let buffer = new ArrayBuffer(4096);
   let readLen = fs.readSync(file.fd, buffer);
   console.info('readSync data to file succeed and buffer size is:' + readLen);
145 146 147 148
   fs.closeSync(file);
   ```


Z
zengyawen 已提交
149 150
## 选择音频类文件

H
huweiqi 已提交
151
1. 导入选择器模块和文件管理模块。
Z
zengyawen 已提交
152

Z
zengyawen 已提交
153 154
   ```ts
   import picker from '@ohos.file.picker';
H
huweiqi 已提交
155
   import fs from '@ohos.file.fs';
156
   import { BusinessError } from '@ohos.base';
Z
zengyawen 已提交
157 158 159
   ```

2. 创建音频选择选项实例。
Z
zengyawen 已提交
160

Z
zengyawen 已提交
161 162 163 164
   ```ts
   const audioSelectOptions = new picker.AudioSelectOptions();
   ```

H
huweiqi 已提交
165
3. 创建音频选择器实例。调用[select()](../reference/apis/js-apis-file-picker.md#select-6)接口拉起FilePicker界面进行文件选择。文件选择成功后,返回被选中音频的uri结果集。
H
huweiqi 已提交
166
   
H
huweiqi 已提交
167
   </br>select返回的uri权限是只读权限,开发者可以根据结果集中uri做读取文件数据操作。注意不能在  picker的回调里直接使用此uri进行打开文件操作,需要定义一个全局变量保存uri,使用类似一个按钮去触发打开文件。
H
huweiqi 已提交
168
   
H
huweiqi 已提交
169
   </br>例如通过[文件管理接口](../reference/apis/js-apis-file-fs.md)根据uri拿到音频资源的文件句柄(FD),再配合媒体服务实现音频播放的开发,具体请参考[音频播放开发指导](../media/audio-playback-overview.md)
Z
zengyawen 已提交
170

Z
zengyawen 已提交
171 172 173
   > **说明:**
   >
   > 目前AudioSelectOptions不支持参数配置,默认可以选择所有类型的用户文件。
Z
zengyawen 已提交
174

Z
zengyawen 已提交
175
   ```ts
176
   let uri: string;
Z
zengyawen 已提交
177
   const audioViewPicker = new picker.AudioViewPicker();
178
   audioViewPicker.select(audioSelectOptions).then((audioSelectResult: Array<string>) => {
179
     uri = audioSelectResult[0];
H
huweiqi 已提交
180
     console.info('audioViewPicker.select to file succeed and uri is:' + uri);
181
   }).catch((err: BusinessError) => {
H
huweiqi 已提交
182
     console.error(`Invoke audioViewPicker.select failed, code is ${err.code}, message is ${err.message}`);
183 184 185
   })
   ```

H
huweiqi 已提交
186
4. 待界面从FilePicker返回后,再通过类似一个按钮调用其他函数,使用[fs.openSync](../reference/apis/js-apis-file-fs.md#fsopensync)接口,通过uri打开这个文件得到fd。这里需要注意接口权限参数是fs.OpenMode.READ_ONLY。
187 188

   ```ts
H
huweiqi 已提交
189
   let file = fs.openSync(uri, fs.OpenMode.READ_ONLY);
190 191 192
   console.info('file fd: ' + file.fd);
   ```

H
huweiqi 已提交
193
5. 通过fd使用[fs.readSync](../reference/apis/js-apis-file-fs.md#readsync)接口读取这个文件内的数据,读取完成后关闭fd。
194 195

   ```ts
H
huweiqi 已提交
196 197 198
   let buffer = new ArrayBuffer(4096);
   let readLen = fs.readSync(file.fd, buffer);
   console.info('readSync data to file succeed and buffer size is:' + readLen);
199
   fs.closeSync(file);
Z
zengyawen 已提交
200
   ```