1. HTTP上传文件简介
在上一篇文章鸿蒙网络编程系列10-使用HttpRequest下载文件到本地示例中，我们使用HttpRequest下载了文件，同样，使用HttpRequest也可以上传文件，假设我们有一个网站，其文件上传地址为http://192.168.100.101:8081/upload，为简单起见，该网站不需要登录既可以上传文件，当然，需要的登录话也没什么，参考上一篇文章即可。本文将模拟文件上传的功能，开发鸿蒙应用客户端把文件上传到服务端，为减少复杂性，假设上传的是文本类型的小文件，其他类型的或者更大的文件，也可以参考本文修改。
2. 客户端上传示例
本示例运行后的界面如图所示：
单击选择按钮，从本地选择文件后，然后单击上传按钮即可上传文件到服务端。
下面详细介绍创建该应用的步骤。
步骤1：创建Empty Ability项目。
步骤2：在module.json5配置文件加上对权限的声明：
"requestPermissions": [
{
"name": "ohos.permission.INTERNET"
}
]这里添加了访问互联网的权限。
步骤3：在Index.ets文件里添加如下的代码：
import http from '@ohos.net.http';
import util from '@ohos.util';
import fs from '@ohos.file.fs';
import picker from '@ohos.file.picker';
import systemDateTime from '@ohos.systemDateTime';
@Entry
@Component
struct Index {
//连接、通讯历史记录
@State msgHistory: string = ''
//上传地址
@State uploadUrl: string = "http://192.168.100.101:8081/upload"
//要上传的文件
@State uploadFilePath: string = ""
//是否允许上传
@State canUpload: boolean = false
scroller: Scroller = new Scroller()
build() {
Row() {
Column() {
Text("模拟上传示例")
.fontSize(14)
.fontWeight(FontWeight.Bold)
.width('100%')
.textAlign(TextAlign.Center)
.padding(10)
Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
Text("上传的文件：")
.fontSize(14)
.width(100)
.flexGrow(0)
TextInput({ text: this.uploadFilePath })
.enabled(false)
.width(100)
.fontSize(11)
.flexGrow(1)
Button("选择")
.onClick(() => {
this.selectFile()
})
.width(70)
.fontSize(14)
}
.width('100%')
.padding(10)
Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
Text("上传地址：")
.fontSize(14)
.width(80)
.flexGrow(0)
TextInput({ text: this.uploadUrl })
.onChange((value) => {
this.uploadUrl = value
})
.width(110)
.fontSize(11)
.flexGrow(1)
Button("上传")
.onClick(() => {
this.uploadFile()
})
.enabled(this.canUpload)
.width(70)
.fontSize(14)
.flexGrow(0)
}
.width('100%')
.padding(10)
Scroll(this.scroller) {
Text(this.msgHistory)
.textAlign(TextAlign.Start)
.padding(10)
.width('100%')
.backgroundColor(0xeeeeee)
}
.align(Alignment.Top)
.backgroundColor(0xeeeeee)
.height(300)
.flexGrow(1)
.scrollable(ScrollDirection.Vertical)
.scrollBar(BarState.On)
.scrollBarWidth(20)
}
.width('100%')
.justifyContent(FlexAlign.Start)
.height('100%')
}
.height('100%')
}
//构造上传文本文件的body内容
buildBodyContent(boundary: string, fileName: string, content: string) {
let body = `--${boundary}\r\n`
body = body + `Content-Disposition: form-data; name="file"; filename="${fileName}"\r\n`
body = body + `Content-Type: text/plain\r\n`
body = body + '\r\n'
body = body + content
body = body + '\r\n'
body = body + `--${boundary}`
body = body + '--\r\n'
return body
}
//上传文件
async uploadFile() {
//上传文件使用的分隔符
let boundary: string = '----ShandongCaoxianNB666MyBabyBoundary' + (await systemDateTime.getCurrentTime(true)).toString()
//选择要上传的文件的内容
let fileContent: string = buf2String(this.readContentFromFile(this.uploadFilePath))
let segments = this.uploadFilePath.split('/')
//文件名称
let fileName = segments[segments.length-1]
//上传请求的body内容
let bodyContent = this.buildBodyContent(boundary, fileName, fileContent)
let textEncoder = new util.TextEncoder();
let contentBuf = textEncoder.encodeInto(bodyContent)
//http请求对象
let httpRequest = http.createHttp();
let opt: http.HttpRequestOptions = {
method: http.RequestMethod.POST,
header: { 'Content-Type': `multipart/form-data; boundary=${boundary}`,
'Content-Length': contentBuf.length.toString()
},
extraData: bodyContent
}
//发送上传请求
httpRequest.request(this.uploadUrl, opt)
.then((resp) => {
this.msgHistory += "响应码：" + resp.responseCode + "\r\n"
this.msgHistory += "上传成功\r\n"
})
.catch((e) => {
this.msgHistory += "请求失败：" + e.message + "\r\n"
})
}
//选择文件，为简单起见，选择一个不太大的文本文件
selectFile() {
let documentPicker = new picker.DocumentViewPicker();
documentPicker.select().then((result) => {
if (result.length > 0) {
this.uploadFilePath = result[0]
this.msgHistory += "select file: " + this.uploadFilePath + "\r\n";
this.canUpload = true
}
}).catch((e) => {
this.msgHistory += 'DocumentViewPicker.select failed ' + e.message + "\r\n";
});
}
//从文件读取内容
readContentFromFile(fileUri: string): ArrayBuffer {
let buf = new ArrayBuffer(1024 * 4);
let file = fs.openSync(fileUri, fs.OpenMode.READ_ONLY);
let readLen = fs.readSync(file.fd, buf, { offset: 0 });
let result = buf.slice(0, readLen)
fs.closeSync(file);
return result
}
}
//ArrayBuffer转utf8字符串
function buf2String(buf: ArrayBuffer) {
let msgArray = new Uint8Array(buf);
let textDecoder = util.TextDecoder.create("utf-8");
return textDecoder.decodeWithStream(msgArray)
}步骤4：编译运行，可以使用模拟器或者真机。
步骤5：单击“选择”按钮，弹出文件选择窗口，如图所示：。
步骤6：选择要上传的文件，这里选择"harmonyos.txt",返回应用后的截图如下所示：
因为鸿蒙系统对物理文件和沙箱文件作了隔离，在应用看来，这个文件的路径是file: datashare:///media/file/482909
步骤7：单击“上传”按钮，上传文件到服务端，截图如下所示：
步骤8：在服务端可以看到上传后的文件（具体路径和服务端有关）：
使用记事本打开该文件，可以看到文件内容：
这样就完成了文件的上传。
3. 上传功能分析
要实现上传功能，关键点在如下方面：
首先，构造HTTP请求的body部分，代码如下：
//构造上传文本文件的body内容
buildBodyContent(boundary: string, fileName: string, content: string) {
let body = `--${boundary}\r\n`
body = body + `Content-Disposition: form-data; name="file"; filename="${fileName}"\r\n`
body = body + `Content-Type: text/plain\r\n`
body = body + '\r\n'
body = body + content
body = body + '\r\n'
body = body + `--${boundary}`
body = body + '--\r\n'
return body
}特别注意的是Content-Disposition和Content-Type，另外就是参数boundary，它是分隔符，要保证不和文件内容重复。
其次，就是请求的Header部分，代码如下：
//http请求对象
let httpRequest = http.createHttp();
let opt: http.HttpRequestOptions = {
method: http.RequestMethod.POST,
header: { 'Content-Type': `multipart/form-data; boundary=${boundary}`,
'Content-Length': contentBuf.length.toString()
},
extraData: bodyContent
}比较容易犯错的是Content-Length，它是内容的字节长度。
最后
有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。
点击领取→【纯血版鸿蒙全套最新学习资料】（安全链接，放心点击）希望这一份鸿蒙学习资料能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！
这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、（南向驱动、嵌入式等）鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。
鸿蒙（HarmonyOS NEXT）最新学习路线
有了路线图，怎么能没有学习资料呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包含：ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。
获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料
HarmonyOS Next 最新全套视频教程
《鸿蒙 (OpenHarmony)开发基础到实战手册》
OpenHarmony北向、南向开发环境搭建
《鸿蒙开发基础》
- ArkTS语言
- 安装DevEco Studio
- 运用你的第一个ArkTS应用
- ArkUI声明式UI开发
- .……
《鸿蒙开发进阶》
- Stage模型入门
- 网络管理
- 数据管理
- 电话服务
- 分布式应用开发
- 通知与窗口管理
- 多媒体技术
- 安全技能
- 任务管理
- WebGL
- 国际化开发
- 应用测试
- DFX面向未来设计
- 鸿蒙系统移植和裁剪定制
- ……
《鸿蒙进阶实战》
- ArkTS实践
- UIAbility应用
- 网络案例
- ……
大厂面试必问面试题
鸿蒙南向开发技术
鸿蒙APP开发必备
鸿蒙生态应用开发白皮书V2.0PDF
总结
总的来说，华为鸿蒙不再兼容安卓，对中年程序员来说是一个挑战，也是一个机会。只有积极应对变化，不断学习和提升自己，他们才能在这个变革的时代中立于不败之地。
1253
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
