当前位置：首页 > news >正文

鸿蒙网络编程系列62-仓颉版使用Request部件上传多个文件到服务端

news 2025/8/28 7:05:37

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_entryinternal 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_entryimport 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 {@Statevar title: String = '多文件上传示例';//连接、通讯历史记录@Statevar msgHistory: String = ''//首页地址@Statevar uploadUrl: String = "http://*.*.*.*:8081/upload"//是否允许上传@Statevar 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 = truecase _ => ()}}}documentPicker.select(documentSelectCallback, option: option)}func copy2SandboxCacheDir(context: AbilityContext, srcUri: String, fileName: String): String {//计划复制到的目标路径let realUri = context.filesDir.replace("files", "cache") + "/" + fileNamelet 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) => contextcase _ => throw Exception("获取全局Ability上下文异常")}}
}//上传完成的回调
class CompletedCallback <: Callback1Argument<agentProgress> {let parent: EntryViewpublic init(parent: EntryView) {this.parent = parent}public open func invoke(progress: agentProgress): Unit {parent.addMsgInfo("上传完毕\r\n")}
}