鸿蒙系统开辟【网络-上传和下载（ArkTS）】基本功能

网络-上传和下载（ArkTS）

先容

本示例利用@ohos.request接口创建上传和下载任务，实现上传、下载功能，hfs作为服务器，实现了文件的上传和下载和任务的查询功能。
效果预览

利用阐明
1.本示例功能需要先配置服务器情况后利用，具体配置见[上传下载服务配置]。
2.首页展示上传和下载两个入口组件，点击进入对应的页面，如果要利用背景下载任务，请开启背景任务开关。
3.上传页面(请先在图库中确定已开启图库权限)：
​ 点击**+**，从相册选择拉起图库选择照片，图片选择页面支持拍照，选择照片后点击发表进行上传。
​ 在首页中打开背景任务开关后，上传页面开启的是背景上传任务，背景任务在应用退出到背景时可以在关照栏看到任务状态。
4.下载页面：
​ 点击文件列表选择要下载的文件后，点击下载选择指定路径后开始下载。
​ 点击查看下载文件进入下载文件页面，点击文件夹查看文件夹内的文件。
​ 在首页中打开背景任务开关后，下载页面开启的是背景下载任务，背景任务在应用退出到背景时可以在关照栏看到任务状态。
​ 前台下载时只支持单文件下载，背景下载时支持选择多个文件下载。
具体实现

• 该示例分为两个模块：
  
  
  
  • 上传模块
    
    
    
    • 利用@ohos.request中接口agent.create创建上传任务，调用@ohos.request中的Task相干接口实现上传任务的创建、取消、进度加载，失败的任务会调用查询接口获取失败缘故起因并打印在日志中，支持多个文件上传。
      
    
    
  
  
• 源码参考：[RequestUpload.ets]
  

1. /*
2. * Copyright (c) 2023 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 { common } from '@kit.AbilityKit';
17. import { promptAction } from '@kit.ArkUI';
18. import { request } from '@kit.BasicServicesKit';
19. import { urlUtils } from '../utils/UrlUtils';
20. import { logger } from '../utils/Logger';
21. import { MediaUtils } from '../utils/MediaUtils';
22. import { BackgroundTaskState, UPLOAD_TOKEN, TOAST_BOTTOM, TASK_MAX } from '../utils/Constants';
24. const TAG: string = 'RequestUpload';
25. const HEADER: Record<string, string> = { 'Content-Type': 'multipart/form-data' };
27. class Upload {
28.   private mediaUtils: MediaUtils = new MediaUtils();
29.   private config: request.agent.Config = {
30.     action: request.agent.Action.UPLOAD,
31.     headers: HEADER,
32.     url: '',
33.     mode: request.agent.Mode.FOREGROUND,
34.     method: 'POST',
35.     title: 'upload',
36.     network: request.agent.Network.ANY,
37.     data: [],
38.     token: UPLOAD_TOKEN
39.   }
40.   private context: common.UIAbilityContext | undefined = undefined;
41.   private uploadTask: request.agent.Task | undefined = undefined;
42.   private backgroundTask: request.agent.Task | undefined = undefined;
43.   private waitList: Array<string> = [];
44.   progressCallback: Function | undefined = undefined;
45.   completedCallback: Function | undefined = undefined;
46.   failedCallback: Function | undefined = undefined;
48.   constructor() {
49.     setInterval(() => {
50.       this.flushBackgroundTask()
51.     }, 2000);
52.   }
54.   async uploadFilesBackground(fileUris: Array<string>): Promise<void> {
55.     logger.info(TAG, `uploadFiles begin, ${JSON.stringify(fileUris)}`);
56.     this.context = getContext(this) as common.UIAbilityContext;
57.     if (fileUris.length === 0) {
58.       return;
59.     }
60.     fileUris.forEach((item: string) => {
61.       this.waitList.push(item);
62.     });
63.   }
65.   async flushBackgroundTask() {
66.     let tasks = await request.agent.search({
67.       state: request.agent.State.RUNNING
68.     });
69.     let state = AppStorage.get<number>('backTaskState');
70.     if (state === BackgroundTaskState.RUNNING) {
71.       if (tasks.length < TASK_MAX && this.waitList.length > 0) {
72.         this.createBackgroundTask(this.waitList);
73.         this.waitList = [];
74.       } else {
75.         if (this.backgroundTask === undefined || tasks.indexOf(this.backgroundTask.tid) === -1) {
76.           AppStorage.setOrCreate('backTaskState', BackgroundTaskState.NONE);
77.           this.backgroundTask = undefined;
78.         }
79.       }
80.     }
81.   }
83.   async createBackgroundTask(fileUris: Array<string>) {
84.     if (this.context === undefined) {
85.       return;
86.     }
87.     this.config.url = await urlUtils.getUrl(this.context);
88.     this.config.data = await this.getFilesAndData(this.context.cacheDir, fileUris);
89.     this.config.mode = request.agent.Mode.BACKGROUND;
90.     try {
91.       this.backgroundTask = await request.agent.create(this.context, this.config);
92.       await this.backgroundTask.start();
93.       let state = AppStorage.get<number>('backTaskState');
94.       if (state === BackgroundTaskState.PAUSE) {
95.         await this.backgroundTask.pause();
96.       }
97.       logger.info(TAG, `createBackgroundTask success`);
98.     } catch (err) {
99.       logger.error(TAG, `task  err, err  = ${JSON.stringify(err)}`);
100.     }
101.   }
103.   async uploadFiles(fileUris: Array<string>, callback: (progress: number, isSucceed: boolean) => void): Promise<void> {
104.     logger.info(TAG, `uploadFiles begin, ${JSON.stringify(fileUris)}`);
105.     if (fileUris.length === 0) {
106.       return;
107.     }
108.     // 查询到存在正在执行的上传任务，提示并返回
109.     let tasks = await request.agent.search({
110.       state: request.agent.State.RUNNING,
111.       action: request.agent.Action.UPLOAD,
112.       mode: request.agent.Mode.FOREGROUND
113.     });
114.     if (tasks.length > 0) {
115.       promptAction.showToast({ message: $r('app.string.have_upload_task_tips'), bottom: TOAST_BOTTOM });
116.       return;
117.     }
118.     let context: common.UIAbilityContext = getContext(this) as common.UIAbilityContext;
119.     this.config.data = await this.getFilesAndData(context.cacheDir, fileUris);
120.     this.config.url = await urlUtils.getUrl(context);
121.     this.config.mode = request.agent.Mode.FOREGROUND;
122.     try {
123.       this.uploadTask = await request.agent.create(context, this.config);
124.       this.uploadTask.on('progress', this.progressCallback = (progress: request.agent.Progress) => {
125.         logger.info(TAG, `progress,  progress = ${progress.processed} ${progress.state}`);
126.         let processed = Number(progress.processed.toString()).valueOf();
127.         let size = progress.sizes[0];
128.         let process: number = Math.floor(processed / size * 100);
129.         if (process < 100) {
130.           callback(process, false);
131.         }
132.       });
133.       this.uploadTask.on('completed', this.completedCallback = (progress: request.agent.Progress) => {
134.         logger.info(TAG, `complete,  progress = ${progress.processed} ${progress.state}`);
135.         callback(100, true);
136.         this.cancelTask();
137.       });
138.       this.uploadTask.on('failed', this.failedCallback = async (progress: request.agent.Progress) => {
139.         if (this.uploadTask) {
140.           let taskInfo = await request.agent.touch(this.uploadTask.tid, UPLOAD_TOKEN);
141.           logger.info(TAG, `fail,  resean = ${taskInfo.reason}, faults = ${JSON.stringify(taskInfo.faults)}`);
142.         }
143.         callback(100, false);
144.         this.cancelTask();
145.       });
146.       await this.uploadTask.start();
147.     } catch (err) {
148.       logger.error(TAG, `task  err, err  = ${JSON.stringify(err)}`);
149.       callback(100, false);
150.     }
151.   }
153.   async cancelTask() {
154.     if (this.uploadTask === undefined) {
155.       return;
156.     }
157.     try {
158.       this.uploadTask.off('progress');
159.       this.progressCallback = undefined;
160.       this.uploadTask.off('failed');
161.       this.failedCallback = undefined
162.       this.uploadTask.off('completed');
163.       this.completedCallback = undefined
164.       await this.uploadTask.stop();
165.       await request.agent.remove(this.uploadTask.tid);
166.     } catch (err) {
167.       logger.info(TAG, `deleteTask fail,err= ${JSON.stringify(err)}`);
168.     }
169.     this.uploadTask = undefined;
170.   }
172.   async pauseOrResume() {
173.     let state = AppStorage.get<number>('backTaskState');
174.     if (state === BackgroundTaskState.RUNNING) {
175.       await this.pause();
176.       AppStorage.setOrCreate('backTaskState', BackgroundTaskState.PAUSE);
177.     } else if (state === BackgroundTaskState.PAUSE) {
178.       await this.resume();
179.       AppStorage.setOrCreate('backTaskState', BackgroundTaskState.RUNNING);
180.     } else {
181.       logger.info(TAG, 'this task state is error');
182.     }
183.   }
185.   async pause() {
186.     logger.info(TAG, 'pause');
187.     if (this.backgroundTask === undefined) {
188.       return;
189.     }
190.     try {
191.       await this.backgroundTask.pause();
192.     } catch (err) {
193.       logger.info(TAG, `pause fail,err= ${JSON.stringify(err)}`);
194.     }
195.   }
197.   async resume() {
198.     logger.info(TAG, 'resume');
199.     if (this.backgroundTask === undefined) {
200.       return;
201.     }
202.     try {
203.       await this.backgroundTask.resume();
204.     } catch (err) {
205.       logger.info(TAG, `resume fail,err= ${JSON.stringify(err)}`);
206.     }
207.   }
209.   private async getFilesAndData(cacheDir: string, fileUris: Array<string>): Promise<Array<request.agent.FormItem>> {
210.     logger.info(TAG, `getFilesAndData begin`);
211.     let files: Array<request.agent.FormItem> = [];
212.     for (let i = 0; i < fileUris.length; i++) {
213.       logger.info(TAG, `getFile fileUri = ${fileUris[i]}`);
214.       let imagePath = await this.mediaUtils.copyFileToCache(cacheDir, fileUris[i]);
215.       logger.info(TAG, `getFilesAndData ${JSON.stringify(imagePath)}`);
216.       let file: request.agent.FormItem = {
217.         name: imagePath.split('cache/')[1],
218.         value: {
219.           path: './' + imagePath.split('cache/')[1]
220.         }
221.       }
222.       files.push(file);
223.     }
224.     logger.info(TAG, `getFilesAndData ${JSON.stringify(files)}`);
225.     return files;
226.   }
227. }
229. export const requestUpload = new Upload();

复制代码

• 源码参考：[AddPictures.ets]
  

1. /*
2. * Copyright (c) 2023 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 { picker } from '@kit.CoreFileKit';
17. import { logger } from '@ohos/uploaddownload';
18. import { BusinessError } from '@kit.BasicServicesKit';
20. const TAG: string = 'AddPictures';
22. @Extend(Image) function imageStyle() {
23.   .width('100%')
24.   .aspectRatio(1)
25.   .objectFit(ImageFit.Fill)
26.   .backgroundColor($r('app.color.light_gray'))
27.   .borderRadius(12)
28. }
30. const TEXT_WIDTH_FULL: Length = '100%';
31. @Component
32. export struct AddPictures {
33.   @Consume imageList: Array<string>;
35.   build() {
36.     Column() {
37.       Text($r('app.string.tip'))
38.         .fontColor($r('app.color.text_normal'))
39.         .fontWeight(400)
40.         .fontFamily('HarmonyHeiTi')
41.         .fontSize(14)
42.         .opacity(0.4)
43.         .margin({ top: $r('app.float.add_pictures_margin_top'), bottom: $r('app.float.add_pictures_margin_bottom') })
44.         .width(TEXT_WIDTH_FULL)
45.       GridRow({ columns: { sm: 3, md: 6, lg: 8 }, gutter: 12 }) {
46.         ForEach(this.imageList, (item: string) => {
47.           GridCol({ span: 1 }) {
48.             Image(item)
49.               .imageStyle()
50.           }
51.         })
52.         GridCol({ span: 1 }) {
53.           Row() {
54.             Image($r('app.media.ic_public_add'))
55.               .size({ width: 24, height: 24 })
56.               .objectFit(ImageFit.Contain)
57.           }
58.           .width('100%')
59.           .height('100%')
60.           .justifyContent(FlexAlign.Center)
61.         }
62.         .width('100%')
63.         .aspectRatio(1)
64.         .backgroundColor($r('app.color.white'))
65.         .borderRadius(12)
66.         .onClick(() => {
67.           this.showDialog();
68.         })
69.       }
70.     }
71.     .width('100%')
72.   }
74.   addImages = (images: Array<string>) => {
75.     images.forEach((item: string) => {
76.       if (!this.imageList.includes(item)) {
77.         this.imageList.push(item);
78.       }
79.     })
80.     logger.info(TAG, `addImages imageList=${JSON.stringify(this.imageList)}`);
81.   }
83.   showDialog() {
84.     AlertDialog.show({
85.       message: $r('app.string.pick_album'),
86.       alignment: DialogAlignment.Bottom,
87.       offset: { dx: 0, dy: -12 },
88.       primaryButton: {
89.         value: $r('app.string.cancel'),
90.         fontColor: $r('app.color.btn_text_blue'),
91.         action: () => {
92.         }
93.       },
94.       secondaryButton: {
95.         value: $r('app.string.ok'),
96.         fontColor: $r('app.color.btn_text_blue'),
97.         action: () => {
98.           try {
99.             let photoSelectOptions = new picker.PhotoSelectOptions();
100.             photoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE;
101.             photoSelectOptions.maxSelectNumber = 5;
102.             let photoPicker = new picker.PhotoViewPicker();
103.             photoPicker.select(photoSelectOptions).then((photoSelectResult: picker.PhotoSelectResult) => {
104.               this.addImages(photoSelectResult.photoUris);
105.             }).catch((err: BusinessError) => {
106.               logger.error(TAG, `'PhotoViewPicker.select failed with err: ${JSON.stringify(err)}`);
107.             });
108.           } catch (err) {
109.             logger.error(TAG, `'PhotoViewPicker failed with err: ${JSON.stringify(err)}`);
110.           }
111.         }
112.       }
113.     })
114.   }
115. }

复制代码

• 源码参考：[Upload.ets]
  

1. /*
2. * Copyright (c) 2023 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 { common } from '@kit.AbilityKit';
17. import { promptAction } from '@kit.ArkUI';
18. import { AddPictures } from '../components/AddPictures';
19. import { BackgroundTaskState, requestUpload, TOAST_BOTTOM } from '@ohos/uploaddownload';
21. const TIME_MAX: number = 5;
23. @Entry
24. @Component
25. struct Upload {
26.   @StorageLink('isBackground') isBackground: boolean = false;
27.   @StorageLink('backTaskState') @Watch('stateChange') backTaskState: BackgroundTaskState = BackgroundTaskState.NONE;
28.   @State isBegin: boolean = false;
29.   @Provide imageList: Array<string> = [];
30.   @State progress: number = 0;
31.   @State countdown: number = 0;
33.   build() {
34.     Navigation() {
35.       Scroll() {
36.         AddPictures()
37.       }
38.       .padding({ left: 24, right: 24 })
39.       .width('100%')
40.       .layoutWeight(1)
41.       .align(Alignment.Top)
43.       Column() {
44.         Button() {
45.           if (this.isBackground && this.backTaskState !== BackgroundTaskState.NONE) {
46.             if (this.backTaskState === BackgroundTaskState.RUNNING) {
47.               Text($r('app.string.pause'))
48.                 .fontSize(16)
49.                 .fontWeight(500)
50.                 .fontColor($r('app.color.white'))
51.             } else {
52.               Text($r('app.string.continue'))
53.                 .fontSize(16)
54.                 .fontWeight(500)
55.                 .fontColor($r('app.color.white'))
56.             }
57.           } else if (this.isBegin && !this.isBackground) {
58.             Row() {
59.               Progress({ value: this.progress, type: ProgressType.Ring })
60.                 .width(20)
61.                 .height(20)
62.                 .backgroundColor('#FFFFFF')
63.                 .color('#558DFF')
64.                 .style({ strokeWidth: 2, scaleCount: 100, scaleWidth: 2 })
65.               Text(`${this.getResourceString($r('app.string.uploading'))}${this.progress}%`)
66.                 .fontSize(16)
67.                 .fontColor('#FFFFFF')
68.                 .fontWeight(500)
69.                 .margin({ left: 12 })
70.             }.alignItems(VerticalAlign.Center)
71.           } else {
72.             if (this.countdown > 0) {
73.               Text(`${this.countdown}s`)
74.                 .fontSize(16)
75.                 .fontWeight(500)
76.                 .fontColor($r('app.color.white'))
77.             } else {
78.               Text($r('app.string.upload'))
79.                 .fontSize(16)
80.                 .fontWeight(500)
81.                 .fontColor($r('app.color.white'))
82.             }
83.           }
84.         }
85.         .id('publish')
86.         .width('100%')
87.         .height(40)
88.         .margin({ bottom: this.isBegin ? 16 : 24 })
89.         .enabled(this.countdown > 0 ? false : true)
90.         .backgroundColor($r('app.color.button_blue'))
91.         .onClick(() => {
92.           if (this.isBackground && this.backTaskState !== BackgroundTaskState.NONE) {
93.             requestUpload.pauseOrResume();
94.           } else {
95.             this.uploadFiles();
96.           }
97.         })
99.         if (this.isBegin) {
100.           Button() {
101.             Text($r('app.string.cancel'))
102.               .fontSize(16)
103.               .fontWeight(500)
104.               .fontColor($r('app.color.btn_text_blue'))
105.           }
106.           .id('cancel')
107.           .width('100%')
108.           .height(40)
109.           .margin({ bottom: 24 })
110.           .backgroundColor($r('app.color.button_light_gray'))
111.           .onClick(() => {
112.             // cancel task
113.             requestUpload.cancelTask();
114.             this.progress = 0;
115.             this.isBegin = false;
116.           })
117.         }
118.       }
119.       .width('100%')
120.       .padding({ left: 24, right: 24 })
121.     }
122.     .width('100%')
123.     .height('100%')
124.     .backgroundColor($r('app.color.light_gray'))
125.     .title($r('app.string.upload'))
126.     .hideBackButton(false)
127.     .titleMode(NavigationTitleMode.Mini)
128.     .mode(NavigationMode.Stack)
129.   }
131.   aboutToAppear() {
132.     this.isBegin = false;
133.     this.backTaskState = BackgroundTaskState.NONE;
134.   }
136.   stateChange() {
137.     if (this.backTaskState === BackgroundTaskState.NONE) {
138.       this.imageList = [];
139.     }
140.   }
142.   uploadFiles() {
143.     if (this.imageList.length === 0) {
144.       return;
145.     }
146.     if (this.isBackground) {
147.       AppStorage.setOrCreate('backTaskState', BackgroundTaskState.RUNNING)
148.       requestUpload.uploadFilesBackground(this.imageList);
149.       promptAction.showToast({ message: $r('app.string.background_task_start'), bottom: TOAST_BOTTOM });
150.     } else {
151.       this.isBegin = true;
152.       this.progress = 0;
153.       requestUpload.uploadFiles(this.imageList, (progress: number, isSucceed: boolean) => {
154.         this.progress = progress;
155.         if (this.progress === 100 && isSucceed) {
156.           this.isBegin = false;
157.           this.imageList = [];
158.           promptAction.showToast({ message: $r('app.string.upload_success'), bottom: TOAST_BOTTOM })
159.         }
160.         if (this.progress === 100 && isSucceed === false) {
161.           this.isBegin = false;
162.           this.countdown = TIME_MAX;
163.           let interval = setInterval(() => {
164.             if (this.countdown > 0) {
165.               this.countdown--;
166.             } else {
167.               clearInterval(interval);
168.             }
169.           }, 1000);
170.           promptAction.showToast({ message: $r('app.string.upload_fail'), bottom: TOAST_BOTTOM })
171.         }
172.       });
173.     }
174.   }
176.   getResourceString(resource: Resource) {
177.     let context = getContext(this) as common.UIAbilityContext;
178.     return context.resourceManager.getStringSync(resource.id);
179.   }
180. }

复制代码

• 参考接口：@ohos.request，@ohos.file.picker
  
  
  
  • 下载模块
    
    
    
    • 利用@ohos.request中接口agent.create创建上传任务，调用@ohos.request中的Task相干接口实现上传任务的创建、取消、暂停、继续、进度加载，失败的任务会调用查询接口获取失败缘故起因并打印在日志中，前台下载任务只支持单个文件下载，背景下载任务支持多文件下载。利用@ohos.file.fs完成指定路径的创建和查询已下载的文件。
      
    
    
  
  
• 源码参考：[RequestDownload.ets]
  

1. /*
2. * Copyright (c) 2023 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 { common } from '@kit.AbilityKit';
17. import { promptAction } from '@kit.ArkUI';
18. import { request } from '@kit.BasicServicesKit';
19. import { logger } from '../utils/Logger';
20. import { TOAST_BOTTOM, TASK_MAX, TASK_PAUSE_MSG, TASK_NET_PAUSE_MSG, TASK_RESUME_MSG, TASK_NET_RESUME_MSG } from '../utils/Constants';
22. const TAG: string = 'RequestDownload';
23. let isNetPause = false;
24. class RequestDownload {
25.   private context: common.UIAbilityContext | undefined = undefined;
26.   private waitList: Array<string[]> = [];
27.   private downloadTask: request.agent.Task | undefined = undefined;
28.   progressCallback: Function | undefined = undefined;
29.   completedCallback: Function | undefined = undefined;
30.   failedCallback: Function | undefined = undefined;
32.   constructor() {
33.     setInterval(() => {
34.       this.flushBackgroundTask()
35.     }, 2000);
36.   }
38.   async downloadFilesBackground(folder: string, files: Array<string>) {
39.     logger.info(TAG, 'downloadFiles');
40.     this.context = getContext(this) as common.UIAbilityContext;
41.     files.forEach((item: string) => {
42.       this.waitList.push([folder, item]);
43.     });
44.   }
46.   async flushBackgroundTask() {
47.     let tasks = await request.agent.search({
48.       state: request.agent.State.RUNNING
49.     });
50.     if (tasks.length < TASK_MAX && this.waitList.length > 0) {
51.       let downloadList: Array<string[]> = [];
52.       if (this.waitList.length <= TASK_MAX - tasks.length) {
53.         downloadList = this.waitList;
54.         this.waitList = [];
55.       } else {
56.         downloadList = this.waitList.slice(0, TASK_MAX - tasks.length);
57.         this.waitList = this.waitList.slice(TASK_MAX - tasks.length, this.waitList.length);
58.       }
59.       logger.info(TAG, `this.waitList = ${JSON.stringify(this.waitList)}`);
60.       this.createBackgroundTask(downloadList);
61.     }
62.   }
64.   async createBackgroundTask(downloadList: Array<string[]>) {
65.     if (this.context === undefined) {
66.       return;
67.     }
68.     for (let i = 0; i < downloadList.length; i++) {
69.       try {
70.         let splitUrl = downloadList[i][1].split('//')[1].split('/');
71.         let downloadConfig: request.agent.Config = {
72.           action: request.agent.Action.DOWNLOAD,
73.           url: downloadList[i][1],
74.           method: 'POST',
75.           title: 'download',
76.           mode: request.agent.Mode.BACKGROUND,
77.           network: request.agent.Network.ANY,
78.           saveas: `./${downloadList[i][0]}/${splitUrl[splitUrl.length-1]}`,
79.           overwrite: true,
80.           gauge: true
81.         }
82.         let downTask = await request.agent.create(this.context, downloadConfig);
83.         await downTask.start();
84.       } catch (err) {
85.         logger.error(TAG, `task  err, err  = ${JSON.stringify(err)}`);
86.         this.waitList.push(downloadList[i]);
87.       }
88.     }
89.   }
91.   async pause() {
92.     if (this.downloadTask) {
93.       let taskInfo = await request.agent.show(this.downloadTask.tid);
94.       logger.info(TAG, `task pause, taskInfo  = ${JSON.stringify(taskInfo)}`);
95.       await this.downloadTask.pause();
96.     }
97.   }
99.   async resume() {
100.     if (this.downloadTask) {
101.       let taskInfo = await request.agent.show(this.downloadTask.tid);
102.       logger.info(TAG, `task resume, taskInfo  = ${JSON.stringify(taskInfo)}`);
103.       await this.downloadTask.resume();
104.     }
105.   }
107.   async downloadFile(folder: string, url: string, callback: (progress: number, isSuccess: boolean) => void) {
108.     logger.info(TAG, 'downloadFile');
109.     // 查询到存在正在执行的下载任务，提示并返回
110.     let tasks = await request.agent.search({
111.       state: request.agent.State.RUNNING,
112.       action: request.agent.Action.DOWNLOAD,
113.       mode: request.agent.Mode.FOREGROUND
114.     });
115.     if (tasks.length > 0) {
116.       promptAction.showToast({ message: $r('app.string.have_download_task_tips'), bottom: TOAST_BOTTOM });
117.       return;
118.     }
119.     let splitUrl = url.split('//')[1].split('/');
120.     let context: common.UIAbilityContext = getContext(this) as common.UIAbilityContext;
121.     let downloadConfig: request.agent.Config = {
122.       action: request.agent.Action.DOWNLOAD,
123.       url: url,
124.       method: 'GET',
125.       title: 'download',
126.       mode: request.agent.Mode.BACKGROUND,
127.       retry: true,
128.       network: request.agent.Network.ANY,
129.       saveas: `./${folder}/${splitUrl[splitUrl.length-1]}`,
130.       overwrite: true
131.     }
132.     logger.info(TAG, `downloadFile, downloadConfig = ${JSON.stringify(downloadConfig)}`);
133.     try {
134.       this.downloadTask = await request.agent.create(context, downloadConfig);
135.       this.downloadTask.on('progress', this.progressCallback = (progress: request.agent.Progress) => {
136.         logger.info(TAG, `progress,  progress = ${progress.processed} ${progress.state}`);
137.         let processed = Number(progress.processed.toString()).valueOf();
138.         let size = progress.sizes[0];
139.         let process: number = Math.floor(processed / size * 100);
140.         if (process < 100) {
141.           callback(process, false);
142.         }
143.       })
144.       this.downloadTask.on('completed', this.completedCallback = (progress: request.agent.Progress) => {
145.         logger.info(TAG, `download complete, file= ${url}, progress = ${progress.processed}`);
146.         callback(100, true);
147.         this.deleteTask();
148.       })
149.       this.downloadTask.on('pause', this.failedCallback = async (progress: request.agent.Progress) => {
150.         if (this.downloadTask) {
151.           let taskInfo = await request.agent.show(this.downloadTask.tid);
152.           logger.info(TAG, `pause,  resean = ${taskInfo.reason}, progress = ${progress.processed}, faults = ${JSON.stringify(taskInfo.faults)}`);
153.           isNetPause = taskInfo.faults === 0;
154.           if (isNetPause) {
155.             callback(TASK_NET_PAUSE_MSG, isNetPause);
156.           }
157.           else {
158.             callback(TASK_PAUSE_MSG, isNetPause);
159.           }
160.         }
161.       })
162.       this.downloadTask.on('resume', this.failedCallback = async (progress: request.agent.Progress) => {
163.         if (this.downloadTask) {
164.           let taskInfo = await request.agent.show(this.downloadTask.tid);
165.           logger.info(TAG, `resume,  resean = ${taskInfo.reason}, progress = ${progress.processed}, faults = ${JSON.stringify(taskInfo.faults)}`);
166.           if (isNetPause) {
167.             isNetPause = false;
168.             callback(TASK_NET_RESUME_MSG, isNetPause);
169.           }
170.           else {
171.             callback(TASK_RESUME_MSG, isNetPause);
172.           }
173.         }
174.       })
175.       this.downloadTask.on('failed', this.failedCallback = async (progress: request.agent.Progress) => {
176.         if (this.downloadTask) {
177.           let taskInfo = await request.agent.show(this.downloadTask.tid);
178.           logger.info(TAG, `fail,  resean = ${taskInfo.reason}, progress = ${progress.processed}, faults = ${JSON.stringify(taskInfo.faults)}`);
179.         }
180.         callback(100, false);
181.         this.deleteTask();
182.       })
183.       await this.downloadTask.start();
184.     } catch (err) {
185.       logger.error(TAG, `task  err, err  = ${JSON.stringify(err)}`);
186.       callback(100, false);
187.     }
188.   }
190.   async deleteTask() {
191.     if (this.downloadTask) {
192.       try {
193.         this.downloadTask.off('progress');
194.         this.progressCallback = undefined;
195.         this.downloadTask.off('completed');
196.         this.completedCallback = undefined
197.         this.downloadTask.off('failed');
198.         this.failedCallback = undefined
199.         await request.agent.remove(this.downloadTask.tid);
200.       } catch (err) {
201.         logger.info(TAG, `deleteTask fail, err= ${JSON.stringify(err)}`);
202.       }
203.     }
205.     this.downloadTask = undefined;
206.   }
207. }
209. export const requestDownload = new RequestDownload();

复制代码

• 源码参考：[Download.ets]
  

1. /*
2. * Copyright (c) 2023 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 { promptAction } from '@kit.ArkUI';
17. import { router } from '@kit.ArkUI';
18. import { CustomDataSource } from '../components/CustomDataSource';
19. import {
20.   FileModel,
21.   FileType,
22.   fileUtils,
23.   logger,
24.   requestFiles,
25.   requestDownload,
26.   TOAST_BOTTOM,
27.   TASK_PAUSE_MSG,
28.   TASK_RESUME_MSG,
29.   TASK_NET_PAUSE_MSG,
30.   TASK_NET_RESUME_MSG
31. } from '@ohos/uploaddownload';
32. import { SelectFolderDialog } from '../components/SelectFolderDialog';
34. const TAG: string = 'Download';
36. const OFFSET_DY: Length = -12;
37. const OFFSET_DX: Length = 0;
38. const LOADING_PROGRESS_WIDTH: Length = 100;
39. const FULL_WIDTH: Length = '100%';
40. const FULL_HEIGHT: Length = '100%';
41. const LIST_WIDTH: Length = '100%';
42. const LIST_HEIGHT: Length = 'auto';
43. const LIST_BORDER_RADIUS: Length | BorderRadiuses = 24;
44. const PADDING_TOP: Length = 4;
45. const PADDING_BOTTOM: Length = 4;
46. const STROKE_WIDTH: Length = 1;
47. const START_MARGIN: Length = 44;
48. const END_MARGIN: Length = 12;
49. const COLUMN_PADDING_LEFT: Length = 12;
50. const COLUMN_PADDING_RIGHT: Length = 12;
51. const COLUMN_PADDING_BOTTOM: Length = 12;
52. const BUTTON_FONT_SIZE = 16;
53. const MARGIN_TOP: Length = 12;
54. const MARGIN_LEFT: Length = 12;
55. const MARGIN_RIGHT: Length = 12;
56. const MARGIN_BOTTOM: Length = 12;
57. const BUTTON_HEIGHT: Length = 45;
58. @Entry
59. @Component
60. struct Download {
61.   private fileData: CustomDataSource = new CustomDataSource([]);
62.   @StorageLink('isBackground') isBackground: boolean = false;
63.   @Provide downloadFolder: Array<string> = [];
64.   @State isGetData: boolean = false;
65.   @State checkFile: Array<string> = [];
66.   @State checkList: Array<boolean> = [];
67.   @State isRunning: boolean = false;
68.   @State isPause: boolean = false;
69.   @State isNetPause: boolean = false;
70.   @State progress: number = 0;
71.   private selectFolder = (folder: string) => {
72.     logger.info(TAG, `selectFolder = ${folder}`);
73.     this.download(folder);
74.   }
75.   private folderDialogController: CustomDialogController = new CustomDialogController({
76.     builder: SelectFolderDialog({ selectFolder: this.selectFolder }),
77.     autoCancel: true,
78.     alignment: DialogAlignment.Bottom,
79.     offset: { dx: OFFSET_DX,
80.       dy: OFFSET_DY }
81.   });
83.   build() {
84.     Navigation() {
85.       Column() {
86.         if (this.isGetData) {
87.           LoadingProgress()
88.             .width(LOADING_PROGRESS_WIDTH)
89.             .layoutWeight(1)
90.         } else {
91.           List({ space: 12 }) {
92.             LazyForEach(this.fileData, (item: FileModel, index: number) => {
93.               ListItem() {
94.                 this.FileItem(item, index)
95.               }
96.             }, (item: FileModel) => JSON.stringify(item))
97.           }
98.           .width(LIST_WIDTH)
99.           .height(LIST_HEIGHT)
100.           .scrollBar(BarState.Off)
101.           .backgroundColor(Color.White)
102.           .borderRadius(LIST_BORDER_RADIUS)
103.           .padding({ top: PADDING_TOP,
104.             bottom: PADDING_BOTTOM })
105.           .divider({ strokeWidth: STROKE_WIDTH,
106.             startMargin: START_MARGIN,
107.             endMargin: END_MARGIN })
108.         }
109.         Column().layoutWeight(1)
111.         this.BottomView()
112.       }
113.       .padding({ left: COLUMN_PADDING_LEFT,
114.         right: COLUMN_PADDING_RIGHT,
115.         bottom: COLUMN_PADDING_BOTTOM })
116.       .height(FULL_HEIGHT)
117.     }
118.     .width(FULL_WIDTH)
119.     .height(FULL_HEIGHT)
120.     .hideBackButton(false)
121.     .titleMode(NavigationTitleMode.Mini)
122.     .mode(NavigationMode.Stack)
123.     .backgroundColor($r('app.color.light_gray'))
124.     .hideToolBar(false)
125.     .title($r('app.string.download'))
126.   }
128.   @Builder
129.   FileItem(file: FileModel, index: number) {
130.     Row() {
131.       Row() {
132.         if (file.fileType === FileType.FOLDER) {
133.           Image($r('app.media.ic_files_folder'))
134.             .size({ width: 24, height: 24 })
135.             .objectFit(ImageFit.Contain)
136.         } else if (file.fileType === FileType.IMAGE) {
137.           Image($r('app.media.ic_public_picture'))
138.             .size({ width: 24, height: 24 })
139.             .objectFit(ImageFit.Contain)
140.         } else if (file.fileType === FileType.MUSIC) {
141.           Image($r('app.media.ic_public_music'))
142.             .size({ width: 24, height: 24 })
143.             .objectFit(ImageFit.Contain)
144.         } else if (file.fileType === FileType.Video) {
145.           Image($r('app.media.ic_public_video'))
146.             .size({ width: 24, height: 24 })
147.             .objectFit(ImageFit.Contain)
148.         } else {
149.           Image($r('app.media.ic_public_document'))
150.             .size({ width: 24, height: 24 })
151.             .objectFit(ImageFit.Contain)
152.         }
154.         Text(decodeURIComponent(file.name))
155.           .fontSize(16)
156.           .fontWeight(400)
157.           .layoutWeight(1)
158.           .maxLines(1)
159.           .textOverflow({ overflow: TextOverflow.Ellipsis })
160.           .margin({ left: 12 })
161.       }
162.       .layoutWeight(1)
164.       Checkbox({ name: '', group: 'checkboxGroup' })
165.         .select(this.checkList[index])
166.         .selectedColor($r('app.color.button_blue'))
167.         .margin({ left: 12 })
168.         .hitTestBehavior(HitTestMode.None)
169.     }
170.     .width('100%')
171.     .padding({ left: 12, right: 12 })
172.     .height(48)
173.     .onClick(() => {
174.       this.fileCheck(index);
175.     })
176.   }
178.   @Builder
179.   BottomView() {
180.     Column({ space: 12 }) {
181.       Button() {
182.         Row() {
183.           if (!this.isBackground && this.isRunning) {
184.             if (this.isPause || this.isNetPause) {
185.               Text($r('app.string.continue'))
186.                 .fontColor(Color.White)
187.                 .fontSize(BUTTON_FONT_SIZE)
188.             }
189.             else {
190.               Text(`${this.progress}%`)
191.                 .fontColor(Color.White)
192.                 .fontSize(BUTTON_FONT_SIZE)
193.               Text($r('app.string.downloading'))
194.                 .fontColor(Color.White)
195.                 .fontSize(BUTTON_FONT_SIZE)
196.                 .margin({ left: MARGIN_LEFT })
197.             }
198.           } else {
199.             Text($r('app.string.download'))
200.               .fontColor(Color.White)
201.               .fontSize(BUTTON_FONT_SIZE)
202.           }
203.         }
204.       }
205.       .id('download_to')
206.       .type(ButtonType.Capsule)
207.       .height(BUTTON_HEIGHT)
208.       .width(FULL_WIDTH)
209.       .backgroundColor($r('app.color.button_blue'))
210.       .onClick(() => {
211.         if (!this.isRunning) {
212.           this.folderDialogController.open();
213.         }
214.         else {
215.           if (!this.isNetPause) {
216.             if (this.isPause) {
217.               requestDownload.resume();
218.             }
219.             else {
220.               requestDownload.pause();
221.             }
222.           }
223.         }
224.       })
226.       Button($r('app.string.view_download_files'))
227.         .id('view_download_files')
228.         .type(ButtonType.Capsule)
229.         .backgroundColor($r('sys.color.ohos_id_color_button_normal'))
230.         .width('100%')
231.         .fontSize(BUTTON_FONT_SIZE)
232.         .margin({ bottom: MARGIN_BOTTOM })
233.         .fontColor($r('app.color.btn_text_blue'))
234.         .onClick(() => {
235.           router.pushUrl({
236.             url: 'pages/DownloadFiles'
237.           });
238.         })
239.     }
240.     .margin({ top: MARGIN_TOP,
241.       left: MARGIN_LEFT,
242.       right: MARGIN_RIGHT })
243.   }
245.   aboutToAppear() {
246.     this.isRunning = false;
247.     this.isPause = false;
248.     this.isGetData = true;
249.     requestFiles.requestFiles().then((data: FileModel[]) => {
250.       this.checkList = [];
251.       this.isRunning = false;
252.       this.fileData.dataArray = data;
253.       this.fileData.dataArray.forEach(() => {
254.         this.checkList.push(false);
255.       })
256.       this.isGetData = false;
257.       this.fileData.notifyDataReload();
258.     })
259.     fileUtils.listFolders().then((folders: Array<string>) => {
260.       this.downloadFolder = folders;
261.     })
262.   }
264.   fileCheck(index: number) {
265.     if (!this.isBackground) {
266.       for (let i = 0; i < this.checkList.length; i++) {
267.         if (i !== index) {
268.           this.checkList[i] = false;
269.         }
270.       }
271.     }
272.     this.checkList[index] = !this.checkList[index];
273.     logger.info(TAG, `this.checkList = ${JSON.stringify(this.checkList)}`);
274.   }
276.   download(folder: string) {
277.     this.checkFile = [];
278.     if (this.checkList === undefined) {
279.       return;
280.     }
281.     logger.info(TAG, `this.checkList = ${JSON.stringify(this.checkList)}`);
282.     for (let i = 0; i < this.checkList.length; i++) {
283.       if (this.checkList[i]) {
284.         let fileModel = this.fileData.getData(i);
285.         logger.info(TAG, `fileModel = ${JSON.stringify(fileModel)}`);
286.         fileModel.files.forEach((url: string) => {
287.           let splitUrl = url.split('//')[1].split('/');
288.           if (splitUrl[splitUrl.length-1] !== '') {
289.             this.checkFile.push(url);
290.           }
291.         });
292.       }
293.     }
294.     logger.info(TAG, `this.checkFile = ${JSON.stringify(this.checkFile)}`);
295.     if (this.checkFile.length === 0) {
296.       promptAction.showToast({ message: $r('app.string.check_file_tips'), bottom: TOAST_BOTTOM });
297.       return;
298.     }
299.     this.progress = 0;
300.     if (this.isBackground) {
301.       this.isRunning = false;
302.       requestDownload.downloadFilesBackground(folder, this.checkFile);
303.       this.checkFile = [];
304.       this.checkList = [];
305.       this.fileData.dataArray.forEach(() => {
306.         this.checkList.push(false);
307.       })
308.       this.fileData.notifyDataReload();
309.       promptAction.showToast({ message: $r('app.string.background_task_start'), bottom: TOAST_BOTTOM });
310.     } else {
311.       this.isRunning = true;
312.       requestDownload.downloadFile(folder, this.checkFile[0], this.downloadFileCallback);
313.     }
314.   }
316.   downloadFilesCallback = (downloadCount: number, isSuccess: boolean) => {
317.     this.progress = downloadCount;
318.     if (downloadCount === this.checkFile.length) {
319.       this.downloadFinish(isSuccess);
320.     }
321.   }
322.   downloadFileCallback = (progress: number, isSuccess: boolean) => {
323.     logger.info(TAG, `downloadFileCallback = ${progress}`);
324.     if (progress === TASK_PAUSE_MSG) {
325.       this.isPause = true;
326.     }
327.     else if (progress === TASK_RESUME_MSG) {
328.       this.isPause = false;
329.     }
330.     else if (progress === TASK_NET_PAUSE_MSG) {
331.       this.isNetPause = true;
332.       let message = $r('app.string.net_pause');
333.       promptAction.showToast({ message: message, bottom: TOAST_BOTTOM });
334.     }
335.     else if (progress === TASK_NET_RESUME_MSG) {
336.       this.isNetPause = false;
337.       let message = $r('app.string.net_resume');
338.       promptAction.showToast({ message: message, bottom: TOAST_BOTTOM });
339.     }
340.     else {
341.       this.progress = progress;
342.       if (this.progress === 100) {
343.         this.downloadFinish(isSuccess);
344.       }
345.     }
346.   }
348.   downloadFinish(isSuccess: boolean) {
349.     this.isRunning = false;
350.     this.checkFile = [];
351.     this.checkList = [];
352.     this.fileData.dataArray.forEach(() => {
353.       this.checkList.push(false);
354.     })
355.     this.fileData.notifyDataReload();
356.     let message = isSuccess ? $r('app.string.download_finish') : $r('app.string.download_fail');
357.     promptAction.showToast({ message: message, bottom: TOAST_BOTTOM });
358.   }
359. }

复制代码

• 源码参考：[FileUtils.ets]
  

1. /*
2. * Copyright (c) 2023 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 { common } from '@kit.AbilityKit';
17. import { fileIo } from '@kit.CoreFileKit';
18. import { logger } from '../utils/Logger';
20. const TAG: string = 'FileUtil';
21. const ALBUMS: string[] = ['Pictures', 'Videos', 'Others'];
23. class FileUtil {
24.   constructor() {
25.   }
27.   async initDownloadDir(): Promise<void> {
28.     let context: common.UIAbilityContext = getContext(this) as common.UIAbilityContext;
29.     logger.info(TAG, `initDownloadDir cacheDir=${context.cacheDir}`);
30.     try {
31.       fileIo.mkdirSync(`${context.cacheDir}/${ALBUMS[0]}`);
32.       fileIo.mkdirSync(`${context.cacheDir}/${ALBUMS[1]}`);
33.       fileIo.mkdirSync(`${context.cacheDir}/${ALBUMS[2]}`);
34.     } catch (err) {
35.       logger.info(TAG, `initDownloadDir err =${JSON.stringify(err)}`);
36.     }
37.   }
39.   async listFolders(): Promise<Array<string>> {
40.     await this.initDownloadDir();
41.     return ALBUMS;
42.   }
44.   async clearFolder(folderName: string): Promise<void> {
45.     let context: common.UIAbilityContext = getContext(this) as common.UIAbilityContext;
46.     try {
47.       let files: string[] = fileIo.listFileSync(`${context.cacheDir}/${folderName}`);
48.       logger.info(TAG, `listFiles listFileSync =${JSON.stringify(files)}`);
49.       for (let i = 0; i < files.length; i++) {
50.         fileIo.unlinkSync(`${context.cacheDir}/${folderName}/${files[i]}`);
51.       }
52.     } catch (err) {
53.       logger.info(TAG, `listFiles err =${JSON.stringify(err)}`);
54.     }
55.   }
57.   async listFiles(folderName: string): Promise<Array<string>> {
58.     let context: common.UIAbilityContext = getContext(this) as common.UIAbilityContext;
59.     let files: string[] = [];
60.     try {
61.       files = fileIo.listFileSync(`${context.cacheDir}/${folderName}`);
62.       logger.info(TAG, `listFiles listFileSync =${JSON.stringify(files)}`);
63.     } catch (err) {
64.       logger.info(TAG, `listFiles err =${JSON.stringify(err)}`);
65.     }
66.     return files;
67.   }
68. }
70. export const fileUtils = new FileUtil();

复制代码

• 源码参考：[FileBrowse.ets]
  

1. /*
2. * Copyright (c) 2023 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 { fileUtils } from '../utils/FileUtils';
18. @Preview
19. @Component
20. export struct FileBrowse {
21.   @State folders: Array<string> = ['folder'];
22.   @State files: Array<string> = [];
23.   @State currentFolder: string = '';
25.   aboutToAppear() {
26.     fileUtils.listFolders().then((folders: Array<string>) => {
27.       this.folders = folders;
28.     })
29.   }
31.   build() {
32.     Navigation() {
33.       List({ space: 12 }) {
34.         ForEach(this.folders, (item: string) => {
35.           ListItem() {
36.             NavRouter() {
37.               Row() {
38.                 Image($r('app.media.ic_files_folder'))
39.                   .size({ width: 32, height: 26 })
40.                   .objectFit(ImageFit.Contain)
41.                 Text(item)
42.                   .fontSize(16)
43.                   .width('100%')
44.                   .margin({ left: 12 })
45.               }
46.               .height(56)
47.               .padding({ left: 16 })
48.               .backgroundColor(Color.White)
49.               .borderRadius(24)
51.               NavDestination() {
52.                 this.FilesView()
53.               }
54.               .title(this.CustomTitle(item))
55.               .backgroundColor($r('app.color.light_gray'))
56.             }
57.             .onStateChange(async (isActivated: boolean) => {
58.               if (isActivated) {
59.                 this.currentFolder = item;
60.                 this.files = await fileUtils.listFiles(item);
61.               }
62.             })
63.           }
64.         })
65.       }
66.       .padding({ left: 12, right: 12 })
67.     }
68.     .hideBackButton(false)
69.     .titleMode(NavigationTitleMode.Mini)
70.     .title($r('app.string.download_files_title'))
71.     .mode(NavigationMode.Stack)
72.     .backgroundColor($r('app.color.light_gray'))
73.   }
75.   @Builder
76.   CustomTitle(title: string) {
77.     Row() {
78.       Text(title)
79.         .fontSize(20)
80.         .fontColor($r('app.color.text_normal'))
81.         .fontWeight(700)
82.         .margin({ left: 8 })
83.     }
84.     .width('100%')
85.   }
87.   @Builder
88.   FilesView() {
89.     Column() {
90.       List({ space: 12 }) {
91.         if (this.files.length === 0) {
92.           ListItem() {
93.             Text($r('app.string.folder_empty'))
94.               .fontSize(16)
95.               .width('100%')
96.               .margin({ top: 50 })
97.               .textAlign(TextAlign.Center)
98.           }
99.         }
100.         ForEach(this.files, (item: string) => {
101.           ListItem() {
102.             Text(decodeURIComponent(item))
103.               .fontSize(16)
104.               .width('100%')
105.           }
106.           .padding(12)
107.           .height(48)
108.           .backgroundColor(Color.White)
109.           .borderRadius(24)
110.         })
111.       }
112.       .padding({ left: 12, right: 12 })
113.       .layoutWeight(1)
115.       Column() {
116.         Button() {
117.           Image($r('app.media.ic_public_delete'))
118.             .objectFit(ImageFit.Cover)
119.             .size({ width: 24, height: 24 })
120.         }
121.         .type(ButtonType.Circle)
122.         .width(40)
123.         .height(40)
124.         .backgroundColor('#FF0000')
125.         .margin({ left: 5 })
127.         Text($r('app.string.clear_folder'))
128.           .fontSize(14)
129.           .fontColor($r('app.color.text_normal'))
130.           .opacity(0.6)
131.           .margin({ top: 8 })
132.       }
133.       .margin({ bottom: 24, top: 6 })
134.       .onClick(() => {
135.         fileUtils.clearFolder(this.currentFolder);
136.         this.files = [];
137.       })
138.     }
139.     .height('100%')
140.     .backgroundColor($r('app.color.light_gray'))
141.   }
142. }

复制代码

• 参考接口：@ohos.request，@ohos.file.fs
  

以上就是本篇文章所带来的鸿蒙开辟中一小部分技能解说；想要学习完整的鸿蒙全栈技能。可以在末端找我可全部拿到！
下面是鸿蒙的完整学习蹊径，展示如下：

除此之外，根据这个学习鸿蒙全栈学习蹊径，也附带一整套完整的学习【文档+视频】，内容包含如下：
   内容包含了：（ArkTS、ArkUI、Stage模型、多端摆设、分布式应用开辟、音频、视频、WebGL、OpenHarmony多媒体技能、Napi组件、OpenHarmony内核、鸿蒙南向开辟、鸿蒙项目实战）等技能知识点。资助大家在学习鸿蒙路上快速发展！
  鸿蒙【北向应用开辟+南向系统层开辟】文档

鸿蒙【基础+实战项目】视频

鸿蒙面经

为了制止大家在学习过程中产生更多的时间成本，对比我把以上内容全部放在了↓↓↓想要的可以自拿喔！谢谢大家观看！

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