鸿蒙应用框架开发【选择并查看文档与媒体文件】 本地数据与文件 ...

选择并查看文档与媒体文件

先容

应用使用@ohos.file.picker、@ohos.file.fs等接口，实现了picker拉起文档编辑生存、拉起系统相册图片查看、拉起视频并播放的功能。
效果预览

使用阐明：

• 在首页，应用表现查看最近打开文件功能的跳转按钮，点击后进入文件管理页面，可以通过最近页面，查看最近打开的文件。通过点击右上方的三个按钮，可以分别实现新建文档、选择图片或视频并打开预览、选择文档并打开的功能。
  
• 在查看文档界面，点击右上方左一按钮，可以实现当前文档另存为的功能；点击右上方中间的按钮，开启文档的编辑功能，textArea变成可编辑状态，用户输入数据后点击右上方第三个按钮，可以将当前文档内容进行生存操作（系统文档没有生存权限）。
  
• 在查看图片界面，picker拉起系统相册的图片，用户至多可选择三张图片查看，点击图片可以切换所表现的图片名及大小信息。
  
• 在查看视频界面，picker拉起系统相册的视频，用户至多可选择三个视频查看，点击视频播放并且可以表现的视频名及大小信息。
  

详细实现

• 拉起picker选择文件、拉起picker生存文件、拉起picker选择图片或视频的功能封装在Index.ets，源码参考：[Index.ets]
  

1. /*
2. * Copyright (c) 2024 Huawei Device Co., Ltd.
3. * Licensed under the Apache License, Version 2.0 (the 'License');
4. * you may not use this file except in compliance with the License.
5. * You may obtain a copy of the License at
6. *
7. *     http://www.apache.org/licenses/LICENSE-2.0
8. *
9. * Unless required by applicable law or agreed to in writing, software
10. * distributed under the License is distributed on an 'AS IS' BASIS,
11. * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12. * See the License for the specific language governing permissions and
13. * limitations under the License.
14. */
16. import { router } from '@kit.ArkUI';
17. import { picker } from '@kit.CoreFileKit';
18. import { BusinessError } from '@kit.BasicServicesKit';
19. import Logger from '../common/Logger';
20. import MediaFileUri from '../media/MediaFileUri';
21. import { Constants } from '../common/Constants';
23. const MAX_SELECT_NUM = 3; // 选择媒体文件的最大数目
24. const TAG = 'pickerIndex';
26. @Entry
27. @Component
28. struct Index {
29.   @State uri: string = 'Hello World';
30.   @State filename: string = '';
31.   @State sizeFile: number = 0;
32.   @State log: string = '';
33.   @State imageFlagCur: number = 0;
34.   @StorageLink('fileSizeList') fileSizeList: Array<number> = [];
35.   @StorageLink('fileNameList') fileNameList: Array<string> = [];
36.   @StorageLink('fileUriList') fileUriList: Array<string> = [];
37.   @StorageLink('imageNames') imageNames: Array<string> = [];
38.   mediaFileUri: MediaFileUri = new MediaFileUri();
39.   scroller: Scroller = new Scroller();
40.   authorizeBundleName: string = 'com.open.file.uri.demo';
42.   // 拉起picker选择文件
43.   async callFilePickerSelectFile(): Promise<void> {
44.     try {
45.       let DocumentSelectOptions = new picker.DocumentSelectOptions();
46.       let documentPicker = new picker.DocumentViewPicker();
47.       documentPicker.select(DocumentSelectOptions).then((DocumentSelectResult) => {
48.         Logger.info(TAG,
49.           'DocumentViewPicker.select successfully, DocumentSelectResult uri: ' + JSON.stringify(DocumentSelectResult));
50.         let editFlag = false;
51.         if (DocumentSelectResult !== null && DocumentSelectResult !== undefined) {
52.           DocumentSelectResult.forEach((value) => {
53.             this.uri = value;
54.             editFlag = true;
55.             Logger.info(TAG, `select file uri: ${this.uri}`);
56.           })
57.         }
58.         if (editFlag) {
59.           this.getFilenameByUri(this.uri);
60.         }
61.       }).catch((err: BusinessError) => {
62.         Logger.error(TAG, 'DocumentViewPicker.select failed with err: ' + JSON.stringify(err));
63.       });
64.     } catch (err) {
65.       Logger.error(TAG, 'DocumentViewPicker failed with err: ' + JSON.stringify(err));
66.     }
67.   }
69.   // 拉起picker保存文件
70.   async callFilePickerSaveFile(): Promise<void> {
71.     try {
72.       let DocumentSaveOptions = new picker.DocumentSaveOptions();
73.       DocumentSaveOptions.newFileNames = ['MyDocument_01.txt'];
74.       let documentPicker = new picker.DocumentViewPicker();
75.       documentPicker.save(DocumentSaveOptions).then((DocumentSaveResult) => {
76.         Logger.info(TAG,
77.           'DocumentViewPicker.save successfully, DocumentSaveResult uri: ' + JSON.stringify(DocumentSaveResult));
78.         if (DocumentSaveResult !== null && DocumentSaveResult !== undefined) {
79.           this.uri = DocumentSaveResult[0];
80.           Logger.info(TAG, `save file uri: ${this.uri}`);
81.         }
82.         this.getFilenameByUri(this.uri);
83.       }).catch((err: BusinessError) => {
84.         Logger.error(TAG, 'DocumentViewPicker.save failed with err: ' + JSON.stringify(err));
85.       });
86.     } catch (err) {
87.       Logger.error(TAG, 'DocumentViewPicker failed with err: ' + err);
88.     }
89.   }
91.   async getFilenameByUriForMedia(myUris: string[]) {
92.     router.pushUrl({
93.       url: 'pages/ViewMedia',
94.       params: {
95.         uris: myUris
96.       }
97.     }, router.RouterMode.Standard);
98.   }
100.   async getFilenameByUri(myUri: string): Promise<void> {
101.     // 获取文件名称
102.     this.filename = (myUri.split('/').pop()) as string;
103.     router.pushUrl({
104.       url: 'pages/EditFile',
105.       params: {
106.         fileName: this.filename,
107.         myUri: myUri
108.       }
109.     }, router.RouterMode.Standard);
110.   }
112.   // 拉起picker选择图片/视频
113.   async callFilePickerSelectImage(): Promise<void> {
114.     let array: string[];
115.     try {
116.       // 设置photoPicker的参数
117.       let PhotoSelectOptions = new picker.PhotoSelectOptions();
118.       // 过滤选择媒体文件类型
119.       PhotoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_VIDEO_TYPE;
120.       // 选择媒体文件的最大数目
121.       PhotoSelectOptions.maxSelectNumber = MAX_SELECT_NUM;
122.       let mediaFlag = false;
123.       // 使用图库选择器对象前，需要先创建PhotoViewPicker实例
124.       let photoPicker = new picker.PhotoViewPicker();
125.       photoPicker.select(PhotoSelectOptions).then((PhotoSelectResult) => {
126.         // 日志中记录成功信息
127.         Logger.info(TAG,
128.           'PhotoViewPicker.select successfully, PhotoSelectResult uri: ' + JSON.stringify(PhotoSelectResult));
129.         // 接口采用callback异步返回形式，返回PhotoSelectResult对象，故进行下一步操作前要先判断是否已经成功返回PhotoSelectResult对象了
130.         if (PhotoSelectResult !== null && PhotoSelectResult !== undefined) {
131.           // PhotoSelectResult为返回的结果集。
132.           // 其中包含Array<string>类型的photoUris，为返回图库选择后的媒体文件的uri数组；还包含boolean类型的isOriginalPhoto，指示返回图库选择后的媒体文件是否为原图。
133.           // 声明变量array，其取值为PhotoSelectResult中的数组。
134.           array = PhotoSelectResult['photoUris'];
135.           array.forEach((value) => {
136.             this.uri = value;
137.             mediaFlag = true;
138.             Logger.info(TAG, `select image/video uri: ${this.uri}`);
139.           })
140.         }
141.         if (mediaFlag) {
142.           this.getFilenameByUriForMedia(array);
143.         }
144.       }).catch((err: BusinessError) => {
145.         Logger.error(TAG, 'PhotoViewPicker.select failed with err: ' + JSON.stringify(err));
146.       });
147.     } catch (err) {
148.       Logger.error(TAG, 'PhotoViewPicker failed with err: ' + err);
149.     }
150.   }
152.   aboutToDisappear(): void {
153.     this.fileNameList = [];
154.     this.fileSizeList = [];
155.     this.fileUriList = [];
156.   }
158.   onPageShow(): void {
159.     this.mediaFileUri.getAllFiles();
160.   }
162.   build() {
163.     Scroll(this.scroller) {
164.       Row() {
165.         Column() {
166.           Row() {
167.             Column() {
168.               Text($r('app.string.last_open'))
169.                 .fontFamily('HarmonyHeiTi-Bold')
170.                 .fontSize($r('app.float.text_font_size_30'))
171.                 .fontWeight(Constants.TEXT_FONT_WIGHT)
172.                 .textAlign(TextAlign.Start)
173.                 .fontColor($r('app.color.text_font_color'))
174.                 .lineHeight($r('app.float.first_line_height'))
175.                 .width(Constants.SEVENTY_PERCENT)
176.                 .height($r('app.float.first_line_height'

复制代码

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