鸿蒙应用开发--头像上传的流程: 开启网络权限,选择图片,存到cacheDir里面,上传到服务器

Flamingo_huohuo

已于 2025-03-16 11:26:59 修改

阅读量645

点赞数 13

分类专栏：鸿蒙复习文章标签： harmonyos 服务器华为

于 2025-03-16 10:56:46 首次发布

本文链接：https://blog.youkuaiyun.com/2401_88846919/article/details/146290838

版权

鸿蒙复习专栏收录该内容

167 篇文章

订阅专栏

零,注意: 要开启权限: `ohos.permission.INTERNET`

如果按照文档的步骤写代码,但上传错误,这个时候一定要检查网络权限是否打开.在module.json5里面配置.
在这里插入图片描述

一,封装seletPhoto工具函数–实现从本地选择图片获取uri的功能

使用Picker选择媒体库资源

在这里插入图片描述

二,使用第二步的本地图片的uri,实现将图片拷贝到cacheDir下面的功能

华为文档–@ohos.file.fs

在这里插入图片描述

三,封装uploadFile工具函数–实现从cacheDir中上传文件

华为文档–文件的上传和下载

华为文档–request.uploadFile9+API

1.本地缓存中–创建文件fs.openSync,写入数据fs.writeSync,关闭写入fs.closeSync

鸿蒙中文件上传都是写存到cacheDir缓存目录里面

// 获取应用文件路径
let context = getContext(this) as common.UIAbilityContext;
let cacheDir = context.cacheDir;

// 新建一个本地应用文件
let file = fs.openSync(cacheDir + '/test.txt', fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE);
//往文件中写入数据
fs.writeSync(file.fd, 'upload file test');
//关闭写入
fs.closeSync(file);

2.准备文件上传需要的–配置项uploadConfig(包含: url,header,method, files和data)

这里写的 uri: 'internal://cache/test.txt'是第一步文件缓存的路径.在鸿蒙中不管是从本地获取的文件,还是新new出来的文件,只要是上传,都要先存入到cache目录里面
而cache目录下面的文件uri前缀internal://cache


// 上传任务配置项

let files: Array<request.File> = [
//uri前缀internal://cache 对应cacheDir目录
  { filename: 'test.txt', name: 'test', uri: 'internal://cache/test.txt', type: 'txt' }
]

let data: Array<request.RequestData> = [{ name: 'name', value: 'value' }];

let uploadConfig: request.UploadConfig = {
  url: 'https://xxx',
  header: {
    'key1':'value1',
    'key2':'value2'
  },
  method: 'POST',
  files: files,
  data: data
}

3.将本地应用文件上传至服务器–request.uploadFile(context,uploadConfig)

// 将本地应用文件上传至网络服务器
try {
  request.uploadFile(context, uploadConfig)
    .then((uploadTask: request.UploadTask) => {
      uploadTask.on('complete', (taskStates: Array<request.TaskState>) => {

//上传的时候,如果上传了多个文件,每个文件的结果循环打印出来
        for (let i = 0; i < taskStates.length; i++) {
          console.info(`upload complete taskState: ${JSON.stringify(taskStates[i])}`);
        }
      });
    })
    .catch((err: BusinessError) => {
      console.error(`Invoke uploadFile failed, code is ${err.code}, message is ${err.message}`);
    })
} catch (error) {
  let err: BusinessError = error as BusinessError;
  console.error(`Invoke uploadFile failed, code is ${err.code}, message is ${err.message}`);
}