HarmonyOS开发实战系列：Request部件上传文件到服务端示例规范 ...

 1. Request上传文件简介

在前述文章鸿蒙开发实战系列-使用HttpRequest上传文件到服务端示例中，使用基础的HttpRequest模块演示了怎样上传文件到服务器，在鸿蒙开发实战系列-使用Request部件下载文件到当地示例中，介绍了request部件，该部件提供了上传下载的方法，并且演示了怎样使用该部件下载文件，本文将继承介绍该部件，同时演示怎样使用该部件上传文件到服务器。
2. request的常用方法

鸿蒙封装的request对象位于模块request中，使用如下的方式导入：
   import request from '@ohos.request';
  request模块包罗了众多的对象和操作方法，就本文而言，重点必要把握的是uploadFile方法：
uploadFile(context: BaseContext, config: UploadConfig): Promise<UploadTask>
该方法实行异步上传，使用promise形式返回结果，结果为UploadTask类型。可以通过UploadTask类型的on('complete'|'fail')订阅任务上传时的完成、失败信息，也可以通过on('progress')订阅任务的上传进度信息。
3. request上传示例

本文上传文件不必要登录，可以直接上传，本示例运行后的界面如图所示：

单击选择按钮，从当地选择文件后，然后单击哀求按钮即可上传文件到服务端。
下面详细介绍创建该应用的步调。
步调1：创建Empty Ability项目。
步调2：在module.json5设置文件加上对权限的声明：

1. "requestPermissions": [
2.       {
3.         "name": "ohos.permission.INTERNET"
4.       }
5.     ]

复制代码

这里添加了访问互联网的权限。
步调3：在Index.ets文件里添加如下的代码：

1. import http from '@ohos.net.http';
2. import util from '@ohos.util';
3. import fs from '@ohos.file.fs';
4. import picker from '@ohos.file.picker';
5. import systemDateTime from '@ohos.systemDateTime';
6. import request from '@ohos.request';
8. @Entry
9. @Component
10. struct Index {
11.   //连接、通讯历史记录
12.   @State msgHistory: string = ''
13.   //上传地址
14.   @State uploadUrl: string = "http://192.168.100.100:8081/upload"
15.   //要上传的文件
16.   @State uploadFilePath: string = ""
17.   //是否允许上传
18.   @State canUpload: boolean = false
19.   scroller: Scroller = new Scroller()
21.   build() {
22.     Row() {
23.       Column() {
24.         Text("request上传示例")
25.           .fontSize(14)
26.           .fontWeight(FontWeight.Bold)
27.           .width('100%')
28.           .textAlign(TextAlign.Center)
29.           .padding(10)
31.         Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
32.           Text("上传的文件：")
33.             .fontSize(14)
34.             .width(100)
35.             .flexGrow(0)
37.           TextInput({ text: this.uploadFilePath })
38.             .enabled(false)
39.             .width(100)
40.             .fontSize(11)
41.             .flexGrow(1)
43.           Button("选择")
44.             .onClick(() => {
45.               this.selectFile()
46.             })
47.             .width(70)
48.             .fontSize(14)
49.         }
50.         .width('100%')
51.         .padding(10)
53.         Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
54.           Text("上传地址：")
55.             .fontSize(14)
56.             .width(80)
57.             .flexGrow(0)
59.           TextInput({ text: this.uploadUrl })
60.             .onChange((value) => {
61.               this.uploadUrl = value
62.             })
63.             .width(110)
64.             .fontSize(11)
65.             .flexGrow(1)
67.           Button("请求")
68.             .onClick(() => {
69.               this.uploadFile()
70.             })
71.             .enabled(this.canUpload)
72.             .width(70)
73.             .fontSize(14)
74.             .flexGrow(0)
75.         }
76.         .width('100%')
77.         .padding(10)
79.         Scroll(this.scroller) {
80.           Text(this.msgHistory)
81.             .textAlign(TextAlign.Start)
82.             .padding(10)
83.             .width('100%')
84.             .backgroundColor(0xeeeeee)
85.         }
86.         .align(Alignment.Top)
87.         .backgroundColor(0xeeeeee)
88.         .height(300)
89.         .flexGrow(1)
90.         .scrollable(ScrollDirection.Vertical)
91.         .scrollBar(BarState.On)
92.         .scrollBarWidth(20)
93.       }
94.       .width('100%')
95.       .justifyContent(FlexAlign.Start)
96.       .height('100%')
97.     }
98.     .height('100%')
99.   }
101.   //上传文件
102.   async uploadFile() {
103.     let context = getContext(this)
104.     let segments = this.uploadFilePath.split('/')
105.     //文件名称
106.     let fileName = segments[segments.length-1]
108.     //计划复制到的目标路径
109.     let realUri = context.cacheDir + "/" + fileName
111.     //复制选择的文件到沙箱cache文件夹
112.     try {
113.       let file = await fs.open(this.uploadFilePath);
114.       fs.copyFileSync(file.fd, realUri)
115.     } catch (err) {
116.       this.msgHistory += 'err.code : ' + err.code + ', err.message : ' + err.message;
117.     }
119.     let uploadTask: request.UploadTask
120.     let uploadConfig: request.UploadConfig = {
121.       url: this.uploadUrl,
122.       header: { 'Accept': '*/*' },
123.       method: "POST",
124.       files: [{ filename: fileName, name: fileName, uri: `internal://cache/${fileName}`, type: "txt" }],
125.       data: [],
126.     };
128.     try {
129.       request.uploadFile(context, uploadConfig).then((data) => {
130.         uploadTask = data;
131.         uploadTask.on("progress", (size, tot) => {
132.           this.msgHistory += `上传进度：${size}/${tot}\r\n`
133.         })
134.         uploadTask.on("complete", () => {
135.           this.msgHistory += "上传完成\r\n"
136.         })
137.       }).catch((e) => {
138.         this.msgHistory += "请求失败：" + e.message + "\r\n"
139.       })
140.     } catch (err) {
141.       this.msgHistory += 'err.code : ' + err.code + ', err.message : ' + err.message;
142.     }
143.   }
145.   //选择文件，为简单起见，选择一个不太大的文本文件
146.   selectFile() {
147.     let documentPicker = new picker.DocumentViewPicker();
148.     documentPicker.select().then((result) => {
149.       if (result.length > 0) {
150.         this.uploadFilePath = result[0]
151.         this.msgHistory += "select file: " + this.uploadFilePath + "\r\n";
152.         this.canUpload = true
153.       }
154.     }).catch((e) => {
155.       this.msgHistory += 'DocumentViewPicker.select failed ' + e.message + "\r\n";
156.     });
157.   }
158. }

复制代码

步调4：编译运行，可以使用模拟器大概真机。
步调5：单击“选择”按钮，弹出文件选择窗口，如图所示：

步调6：选择要上传的文件，这里选择"harmonyos.txt",返回应用后的截图如下所示：

因为鸿蒙体系对物理文件和沙箱文件作了隔离，在应用看来，这个文件的路径是file: datashare:///media/file/482909
步调7：单击“哀求”按钮，上传文件到服务端，截图如下所示：

这样就完成了文件的上传。
3. 上传功能分析

要实现上传功能，关键点在上传文件路径的构造，选择上传文件后得到的文件uri是file: datashare:///media/file/48290，但是，上传要求文件格式为“internal://cache/”，这两个文件的格式是不同等的，为了到达同等的目的，必要复制file: datashare:///media/file/48290文件到沙箱缓存中，具体的代码如下所示：

1.     let context = getContext(this)
2.     let segments = this.uploadFilePath.split('/')
3.     //文件名称
4.     let fileName = segments[segments.length-1]
6.     //计划复制到的目标路径
7.     let realUri = context.cacheDir + "/" + fileName
9.     //复制选择的文件到沙箱cache文件夹
10.     try {
11.       let file = await fs.open(this.uploadFilePath);
12.       fs.copyFileSync(file.fd, realUri)
13.     } catch (err) {
14.       this.msgHistory += 'err.code : ' + err.code + ', err.message : ' + err.message;
15.     }
17.     let uploadTask: request.UploadTask
18.     let uploadConfig: request.UploadConfig = {
19.       url: this.uploadUrl,
20.       header: { 'Accept': '*/*' },
21.       method: "POST",
22.       files: [{ filename: fileName, name: fileName, uri: `internal://cache/${fileName}`, type: "txt" }],
23.       data: [],
24.     };

复制代码

这样，就得到了符合要求的uri。

末了

有很多小伙伴不知道学习哪些鸿蒙开发技能？不知道必要重点把握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，终极浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习黑白常有必要的。 
点击领取→纯血版全套鸿蒙HarmonyOS学习资料盼望这一份鸿蒙学习资料能够给大家带来资助，有必要的小伙伴自行领取~

鸿蒙（HarmonyOS NEXT）最新学习门路

​
有了门路图，怎么能没有学习资料呢，小编也预备了一份联合鸿蒙官方发布笔记整理收纳的一套体系性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门讲授视频，内容包罗：ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。
获取以上完整版高清学习门路，请点击→纯血版全套鸿蒙HarmonyOS学习资料
HarmonyOS Next 最新全套视频教程

​
《鸿蒙 (OpenHarmony)开发基础到实战手册》
OpenHarmony北向、南向开发环境搭建

大厂面试必问面试题

​
鸿蒙南向开发技能

​
鸿蒙APP开发必备

​

请点击→纯血版全套鸿蒙HarmonyOS学习资料
总结
总的来说，华为鸿蒙不再兼容安卓，对中年步伐员来说是一个挑衅，也是一个时机。只有积极应对变化，不停学习和提拔本身，他们才能在这个变革的期间中立于不败之地。 

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