1. Request 上传文件简介
在前述文章鸿蒙网络编程系列11-使用HttpRequest上传文件到服务端示例中，使用基础的 HttpRequest 模块演示了如何上传文件到服务器，在鸿蒙网络编程系列12-使用Request部件下载文件到本地示例中，介绍了 request 部件，该部件提供了上传下载的方法，并且演示了如何使用该部件下载文件，本文将继续介绍该部件，同时演示如何使用该部件上传文件到服务器。
2. request 的常用方法
鸿蒙封装的 request 对象位于模块 request 中，使用如下的方式导入：
import request from '@ohos.request';
request 模块包括了众多的对象和操作方法，就本文而言，重点需要掌握的是 uploadFile 方法：
uploadFile(context: BaseContext, config: UploadConfig): Promise
该方法执行异步上传，使用 promise 形式返回结果，结果为 UploadTask 类型。可以通过 UploadTask 类型的 on('complete'|'fail')订阅任务上传时的完成、失败信息，也可以通过 on('progress')订阅任务的上传进度信息。
3. request 上传示例
本文上传文件不需要登录，可以直接上传，本示例运行后的界面如图所示：
单击选择按钮，从本地选择文件后，然后单击请求按钮即可上传文件到服务端。
下面详细介绍创建该应用的步骤。
步骤 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 request from '@ohos.request';
@Entry@Componentstruct Index { //连接、通讯历史记录 @State msgHistory: string = '' //上传地址 @State uploadUrl: string = "http://192.168.100.100:8081/upload" //要上传的文件 @State uploadFilePath: string = "" //是否允许上传 @State canUpload: boolean = false scroller: Scroller = new Scroller()
build() { Row() { Column() { Text("request上传示例") .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%') }
//上传文件 async uploadFile() { let context = getContext(this) let segments = this.uploadFilePath.split('/') //文件名称 let fileName = segments[segments.length-1]
//计划复制到的目标路径 let realUri = context.cacheDir + "/" + fileName
//复制选择的文件到沙箱cache文件夹 try { let file = await fs.open(this.uploadFilePath); fs.copyFileSync(file.fd, realUri) } catch (err) { this.msgHistory += 'err.code : ' + err.code + ', err.message : ' + err.message; }
let uploadTask: request.UploadTask let uploadConfig: request.UploadConfig = { url: this.uploadUrl, header: { 'Accept': '*/*' }, method: "POST", files: [{ filename: fileName, name: fileName, uri: `internal://cache/${fileName}`, type: "txt" }], data: [], };
try { request.uploadFile(context, uploadConfig).then((data) => { uploadTask = data; uploadTask.on("progress", (size, tot) => { this.msgHistory += `上传进度：${size}/${tot}\r\n` }) uploadTask.on("complete", () => { this.msgHistory += "上传完成\r\n" }) }).catch((e) => { this.msgHistory += "请求失败：" + e.message + "\r\n" }) } catch (err) { this.msgHistory += 'err.code : ' + err.code + ', err.message : ' + err.message; } }
//选择文件，为简单起见，选择一个不太大的文本文件 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"; }); }}
复制代码
步骤 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 文件到沙箱缓存中，具体的代码如下所示：
let context = getContext(this) let segments = this.uploadFilePath.split('/') //文件名称 let fileName = segments[segments.length-1]
//计划复制到的目标路径 let realUri = context.cacheDir + "/" + fileName
//复制选择的文件到沙箱cache文件夹 try { let file = await fs.open(this.uploadFilePath); fs.copyFileSync(file.fd, realUri) } catch (err) { this.msgHistory += 'err.code : ' + err.code + ', err.message : ' + err.message; }
let uploadTask: request.UploadTask let uploadConfig: request.UploadConfig = { url: this.uploadUrl, header: { 'Accept': '*/*' }, method: "POST", files: [{ filename: fileName, name: fileName, uri: `internal://cache/${fileName}`, type: "txt" }], data: [], };
复制代码
这样，就得到了符合要求的 uri。
（本文作者原创，除非明确授权禁止转载）
本文源码地址：
https://gitee.com/zl3624/harmonyos_network_samples/tree/master/code/http/RequstUpload
本系列源码地址：
https://gitee.com/zl3624/harmonyos_network_samples
评论