鸿蒙网络编程系列 21- 使用 HttpRequest 上传任意文件到服务端示例
作者：长弓三石
- 2024-10-22 广东
本文字数：4998 字
阅读完需：约 16 分钟
1. 前述文件上传功能简介
在前述文章鸿蒙网络编程系列11-使用HttpRequest上传文件到服务端示例中，为简化起见，只描述了如何上传文本类型的文件到服务端，对文件的大小也有一定的限制，只能作为鸿蒙 API 演示使用，在实际开发中上传的文件类型多样，大小不一，本文将介绍一种适应性更广的方法，可以上传任何类型的文件到服务端，并且不限制文件的大小。
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';import buffer from '@ohos.buffer';
@Entry@Componentstruct Index { //连接、通讯历史记录 @State msgHistory: string = '' //上传地址 @State uploadUrl: string = "http://192.168.3.8:8081/upload" //上传后的文件名 @State uploadFileName: string = "" //要上传的文件 @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)
}
Flex({ justifyContent: FlexAlign.End, alignItems: ItemAlign.Center }) { Button("图库选择") .onClick(() => { this.selectImgFile() }) .width(100) .fontSize(14)
Button("其他文件") .onClick(() => { this.selectDocFile() }) .width(100) .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) } .width('100%') .padding(10)
Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) { Text("上传后文件名：") .fontSize(14) .width(100) .flexGrow(0)
TextInput({ text: this.uploadFileName }) .onChange((value) => { this.uploadFileName = 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: Uint8Array, contentType: string = "application/octet-stream") { let textEncoder = new util.TextEncoder();
//构造文件内容前的部分 let preFileContent = `--${boundary}\r\n` preFileContent = preFileContent + `Content-Disposition: form-data; name="file"; filename="${fileName}"\r\n` preFileContent = preFileContent + `Content-Type: ${contentType}\r\n` preFileContent = preFileContent + '\r\n' let preArray = textEncoder.encodeInto(preFileContent)
//构造文件内容后的部分 let aftFileContent = '\r\n' aftFileContent = aftFileContent + `--${boundary}` aftFileContent = aftFileContent + '--\r\n' let aftArray = textEncoder.encodeInto(aftFileContent)
//文件前后内容和文件内容组合 let bodyBuf = buffer.concat([preArray, content, aftArray]) return bodyBuf.buffer }
async copy2Sandbox(srcUri: string, fileName: string): Promise<string> { let context = getContext(this) //计划复制到的目标路径 let realUri = context.cacheDir + "/" + fileName
//复制选择的文件到沙箱cache文件夹 try { let file = await fs.open(srcUri); fs.copyFileSync(file.fd, realUri) fs.close(file) } catch (err) { this.msgHistory += 'err.code : ' + err.code + ', err.message : ' + err.message; }
return realUri }
//上传文件 async uploadFile() { //上传文件使用的分隔符 let boundary: string = '----ShandongCaoxianNB666MyBabyBoundary' + (await systemDateTime.getCurrentTime(true)).toString()
let sandFile = await this.copy2Sandbox(this.uploadFilePath, this.uploadFileName)
//选择要上传的文件的内容 let fileContent: Uint8Array = new Uint8Array(this.readContentFromFile(sandFile))
//上传请求的body内容 let bodyContent = this.buildBodyContent(boundary, this.uploadFileName, fileContent)
//http请求对象 let httpRequest = http.createHttp(); let opt: http.HttpRequestOptions = { method: http.RequestMethod.POST, header: { 'Content-Type': `multipart/form-data; boundary=${boundary}`, 'Content-Length': bodyContent.byteLength.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" }) }
//选择图库文件 selectImgFile() { let imgPicker = new picker.PhotoViewPicker(); imgPicker.select().then((result) => { if (result.photoUris.length > 0) { this.uploadFilePath = result.photoUris[0] this.msgHistory += "select file: " + this.uploadFilePath + "\r\n"; this.canUpload = true let segments = this.uploadFilePath.split('/') //文件名称 this.uploadFileName = segments[segments.length-1] } }).catch((e) => { this.msgHistory += 'PhotoViewPicker.select failed ' + e.message + "\r\n"; }); }
//选择文件 selectDocFile() { 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 let segments = this.uploadFilePath.split('/') //文件名称 this.uploadFileName = segments[segments.length-1] } }).catch((e) => { this.msgHistory += 'DocumentViewPicker.select failed ' + e.message + "\r\n"; }); }
//从文件读取内容 readContentFromFile(fileUri: string): ArrayBuffer { let file = fs.openSync(fileUri, fs.OpenMode.READ_ONLY); let fsStat = fs.lstatSync(fileUri); let buf = new ArrayBuffer(fsStat.size); fs.readSync(file.fd, buf); fs.fsyncSync(file.fd) fs.closeSync(file); return buf }}
复制代码
步骤 4：编译运行，可以使用模拟器或者真机。
步骤 5：选择文件，假设单击“图库选择”按钮，弹出图片选择窗口，选择一张图片，如图所示：
步骤 6：单击“完成”按钮，返回 APP，然后修改上传后文件名，最后单击“上传”按钮上传，如图所示：
步骤 7：这样就完成了图片上传，在服务端可以看到上传后的图片：
这样就完成了任意文件的上传。
3. 上传功能分析
要实现上传功能，关键点在构造上传文件 body 内容，代码如下：
//构造上传文件的body内容 buildBodyContent(boundary: string, fileName: string, content: Uint8Array, contentType: string = "application/octet-stream") { let textEncoder = new util.TextEncoder();
//构造文件内容前的部分 let preFileContent = `--${boundary}\r\n` preFileContent = preFileContent + `Content-Disposition: form-data; name="file"; filename="${fileName}"\r\n` preFileContent = preFileContent + `Content-Type: ${contentType}\r\n` preFileContent = preFileContent + '\r\n' let preArray = textEncoder.encodeInto(preFileContent)
//构造文件内容后的部分 let aftFileContent = '\r\n' aftFileContent = aftFileContent + `--${boundary}` aftFileContent = aftFileContent + '--\r\n' let aftArray = textEncoder.encodeInto(aftFileContent)
//文件前后内容和文件内容组合 let bodyBuf = buffer.concat([preArray, content, aftArray]) return bodyBuf.buffer }
复制代码
这里把 body 分为三个部分，分别是上传文件内容前的部分、上传文件内容部分以及上传文件内容后的部分，最后把它们组合到一块，作为 request 方法 options 参数的 extraData 属性，如下所示：
//http请求对象 let httpRequest = http.createHttp(); let opt: http.HttpRequestOptions = { method: http.RequestMethod.POST, header: { 'Content-Type': `multipart/form-data; boundary=${boundary}`, 'Content-Length': bodyContent.byteLength.toString() }, extraData: bodyContent }
复制代码
（本文作者原创，除非明确授权禁止转载）
本文源码地址：
https://gitee.com/zl3624/harmonyos_network_samples/tree/master/code/http/HttpRequestUploadAnyfile
本系列源码地址：
https://gitee.com/zl3624/harmonyos_network_samples
划线
评论
复制
发布于: 刚刚阅读数: 4
版权声明: 本文为 InfoQ 作者【长弓三石】的原创文章。
原文链接:【http://xie.infoq.cn/article/b167b6f9a7df5b708658dcdd0】。文章转载请联系作者。
长弓三石
关注
还未添加个人签名 2024-10-16 加入
二十多年软件开发经验的软件架构师，华为HDE、华为云HCDE、仓颉语言CLD、CCS，著有《仓颉语言网络编程》、《仓颉语言元编程》、《仓颉语言实战》、《鲲鹏架构入门与实战》等书籍，清华大学出版社出版。
评论