鸿蒙NEXT开发【使用HttpRequest上传任意文件到服务端】实战案例

最新推荐文章于 2025-05-23 14:55:21 发布

傲慢的螺蛳粉

最新推荐文章于 2025-05-23 14:55:21 发布

阅读量556

点赞数 5

CC 4.0 BY-SA版权

分类专栏：日志文章标签： harmonyos 鸿蒙鸿蒙系统程序员创富

本文链接：https://blog.youkuaiyun.com/CS9527DND/article/details/142929846

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
@Component
struct 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("图库选择")