1. Request上传多个文件简介
在本系列的第52篇文章《鸿蒙网络编程系列52-仓颉版使用Request部件上传文件示例》中介绍了如何使用Request部件在API12环境下上传文件到服务端；在当时的版本中，还需要通过真机演示。现在鸿蒙系统以及模拟器都得到了很大的完善，在API17环境下，即使使用仓颉语言，也可以在模拟器中演示文件选择和上传了。
对于Request部件来说，文件上传的接口是标准的，不管是上传单个文件还是上传多个文件，调用的接口都是一样的，区别在于表单项的文件信息枚举类型FormItemValueType的选择，如果上传单个文件，使用FILE枚举，多个文件使用FILES枚举。
本文使用的服务端与第52篇文章使用的服务端相同。
2. Request上传多个文件示例演示
本示例运行后的界面如图所示：
输入上传的服务端地址，然后单击“选择”按钮选择要上传的文件，本次演示选择了两个本地文件，如图所示：
然后单击“上传”按钮即可启动文件的上传，如图所示：
上传完毕后，转到服务端的文件接收目录，可以看到刚才上传上去的文件，如图所示：
3. Request上传多个文件示例编写
下面详细介绍创建该示例的步骤（确保DevEco Studio已安装仓颉插件）。
步骤1：创建[Cangjie]Empty Ability项目。
步骤2：在module.json5配置文件加上对权限的声明：
"requestPermissions": [
{
"name": "ohos.permission.INTERNET"
}
]
这里添加了访问互联网的权限。
步骤3：在build-profile.json5配置文件加上仓颉编译架构：
"cangjieOptions": {
"path": "./src/main/cangjie/cjpm.toml",
"abiFilters": ["arm64-v8a", "x86_64"]
}
步骤4：在main_ability.cj文件里添加如下的代码：
package ohos_app_cangjie_entry
internal import ohos.base.AppLog
internal import ohos.ability.AbilityStage
internal import ohos.ability.LaunchReason
internal import cj_res_entry.app
import ohos.ability.*
//Ability全局上下文
var globalAbilityContext: Option<AbilityContext> = Option<AbilityContext>.None
class MainAbility <: Ability {
public init() {
super()
registerSelf()
}
public override func onCreate(want: Want, launchParam: LaunchParam): Unit {
AppLog.info("MainAbility OnCreated.${want.abilityName}")
globalAbilityContext = Option<AbilityContext>.Some(this.context)
match (launchParam.launchReason) {
case LaunchReason.START_ABILITY => AppLog.info("START_ABILITY")
case _ => ()
}
}
public override func onWindowStageCreate(windowStage: WindowStage): Unit {
AppLog.info("MainAbility onWindowStageCreate.")
windowStage.loadContent("EntryView")
}
}
步骤5：在index.cj文件里添加如下的代码：
package ohos_app_cangjie_entry
import ohos.base.*
import ohos.component.*
import ohos.state_manage.*
import ohos.state_macro_manage.*
import std.collection.HashMap
import ohos.net.http.*
import ohos.file_picker.*
import ohos.ability.getStageContext
import ohos.ability.*
import ohos.file_fs.*
import ohos.request.agent.*
import ohos.request.agent.Progress as agentProgress
import std.collection.ArrayList
@Entry
@Component
class EntryView {
@State
var title: String = '多文件上传示例';
//连接、通讯历史记录
@State
var msgHistory: String = ''
//首页地址
@State
var uploadUrl: String = "http://*.*.*.*:8081/upload"
//是否允许上传
@State
var canUpload: Bool = false
@State
//要上传的文件列表
var uploadFilePathList: Array<String> = []
let scroller: Scroller = Scroller()
func build() {
Row {
Column {
Text(title)
.fontSize(14)
.fontWeight(FontWeight.Bold)
.width(100.percent)
.textAlign(TextAlign.Center)
.padding(10)
Flex(FlexParams(justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center)) {
Text("上传地址：").fontSize(14)
TextInput(text: uploadUrl)
.onChange({
value => uploadUrl = value
})
.width(100)
.fontSize(11)
.flexGrow(1)
}.width(100.percent).padding(10)
Flex(FlexParams(justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center)) {
Text("要上传的文件：").fontSize(14).width(80).flexGrow(1)
Button("选择").onClick {
evt => selectUploadFiles()
}.width(70).fontSize(14)
Button("清空").onClick {
evt => uploadFilePathList = []
}.width(70).fontSize(14)
Button("上传").onClick {
evt => uploadFiles()
}.width(70).fontSize(14)
}.width(100.percent).padding(10)
List(space: 10, initialIndex: 0) {
ForEach(
uploadFilePathList,
itemGeneratorFunc: {
item: String, _: Int64 => ListItem() {
Text(item)
}
}
)
}
Scroll(scroller) {
Text(msgHistory)
.textAlign(TextAlign.Start)
.padding(10)
.width(100.percent)
.backgroundColor(0xeeeeee)
}
.align(Alignment.Top)
.backgroundColor(0xeeeeee)
.height(300)
.flexGrow(1)
.scrollable(ScrollDirection.Vertical)
.scrollBar(BarState.On)
.scrollBarWidth(20)
}.width(100.percent).height(100.percent)
}.height(100.percent)
}
//选择需要要上传的文件
func selectUploadFiles() {
let option = DocumentSelectOptions(maxSelectNumber: 1, selectMode: DocumentSelectMode.MIXED)
let documentPicker = DocumentViewPicker(getContext())
let documentSelectCallback = {
errorCode: Option<AsyncError>, data: Option<Array<String>> => match (errorCode) {
case Some(e) => msgHistory += "选择失败，错误码：${e.code}\r\n"
case _ => match (data) {
case Some(value) =>
uploadFilePathList = uploadFilePathList.concat(value[0])
this.canUpload = true
case _ => ()
}
}
}
documentPicker.select(documentSelectCallback, option: option)
}
func copy2SandboxCacheDir(context: AbilityContext, srcUri: String, fileName: String): String {
//计划复制到的目标路径
let realUri = context.filesDir.replace("files", "cache") + "/" + fileName
let file = FileFs.open(srcUri);
FileFs.copyFile(file.fd, realUri)
FileFs.close(file);
return realUri
}
//上传文件
func uploadFiles() {
let uploadItems: ArrayList<FileSpec> = ArrayList<FileSpec>()
for (uploadFilePath in uploadFilePathList) {
let fileName = getFileNameFromPath(uploadFilePath)
let cacheFilePath = copy2SandboxCacheDir(getContext(), uploadFilePath, fileName)
uploadItems.append(FileSpec(path: "./" + fileName))
}
let attachments = ConfigDataType.FORMITEMS(
[
FormItem(
name: "file",
value: FormItemValueType.FILES(uploadItems.toArray())
)
]
)
let config = Config(
action: UPLOAD,
method: "POST",
data: attachments,
url: uploadUrl
)
try {
let task = create(getStageContext(getContext()), config)
task.on("completed", CompletedCallback(this))
task.start()
} catch (e: BusinessException) {
this.msgHistory += "上传文件异常：" + e.toString() + "\r\n"
}
}
//在日志中显示指定信息
func addMsgInfo(info: String) {
this.msgHistory += info
}
func getFileNameFromPath(filePath: String) {
let segments = filePath.split('/')
//文件名称
return segments[segments.size - 1]
}
//获取Ability上下文
func getContext(): AbilityContext {
match (globalAbilityContext) {
case Some(context) => context
case _ => throw Exception("获取全局Ability上下文异常")
}
}
}
//上传完成的回调
class CompletedCallback <: Callback1Argument<agentProgress> {
let parent: EntryView
public init(parent: EntryView) {
this.parent = parent
}
public open func invoke(progress: agentProgress): Unit {
parent.addMsgInfo("上传完毕\r\n")
}
}
步骤6：编译运行，可以使用模拟器或者真机。
步骤7：按照本文第2部分“Request上传多个文件示例演示”操作即可。
4. 代码分析
本示例允许选择多个本地文件上传，为了显示选择了哪些文件，把选择的文件地址放到了字符串数组uploadFilePathList中，然后通过List组件的ForEach循环显示uploadFilePathList中的每一个地址。
在实际执行上传时，把选择的本地文件复制到沙箱目录的临时文件夹中，然后把缓存中的文件路径存入uploadItems变量中，最后使用uploadItems变量构造了Config类型的data属性值，这样就指定了上传任务要上传的文件位置。
（本文作者原创，除非明确授权禁止转载）
本文源码地址：
https://gitee.com/zl3624/harmonyos_network_samples/tree/master/code/http/MultipleFilesUpload4Cj