鸿蒙数据上传三步走——以图片上传为例

浩安
3,298 阅读4分钟

鸿蒙数据上传三步走——以图片上传为例

一、简介

在鸿蒙操作系统中，要如何将图片、文本信息等内容上传到API接口中呢，这里以图片上传为例进行说明

二、上传图片三步走的口诀

一选，二拷，三传

详细而言：一选，即第一步，先选中要上传的图片，通过picker这一工具进行相关操作；二拷，即第二步，拷贝，通过将选中的图片从硬盘拷贝到内存中，再将其复制到鸿蒙操作体统特定的内存位置中，从而进一步将要上传的图片拷贝到远程API接口。

下图是鸿蒙如何将相册图片开闭到应用程序缓存中，再上传到接口服务器中的说明，符合三步骤原理：

上传图片三步骤.png

三、基于代码与图示的理解

第一步：选择，picker

下面是pickAvatar()方法，用途是选择头像图片。

//第一步：定义图片选择Picker的配置、创建图片选择对象并选择图片
  // 用户选择系统中的一个图片返回
  async pickerAvatar() {
    // 1.1 引导用户选择一张系统相册的照片
    // 实例化选项对象
    const options = new picker.PhotoSelectOptions()
    // 过滤选择媒体文件类型为IMAGE——只能选择图片类型的资源
    options.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE
    // 只能选择一张系统相册中的照片
    options.maxSelectNumber = 1 
​
    // 1.2 创建图片选择对象并选择图片
    // 利用PhotoViewPicker对象实例中的select自动获取到用户选择的那张图片的地址  
    const pickerView = new picker.PhotoViewPicker()
    let urls = await pickerView.select(options)
    if (urls.photoUris.length <= 0) {
      return
    }
    let imgUri = urls.photoUris[0]
    // AlertDialog.show({ message: JSON.stringify(urls) })
    return imgUri
  }

第一步（选）小结：

1、引导用户选择一张系统相册的照片，为图片选择器picker设置配置

2、创建图片选择对象并选择图片

第二步：拷贝，copy

根据前面的介绍，可以将拷贝简要理解为如下方式：

图示过程：jpg格式的图片文件从硬盘读至内存，再拷贝至内存中的另一区域，又再一次写到硬盘上

注：

fs：来自@ohos.file.fs (文件管理)

fd： (file descriptor文件描述器)

image.png

如下图可知，在特定位置埋点，得到了图片路径与完整路径，分别是在电脑端硬盘中与鸿蒙端缓存中的

image.png

相关拷贝代码如下：

// 第二步：将文件保存到鸿蒙系统的缓存目录
import fs from '@ohos.file.fs';
​
// 2.将文件保存到缓存目录(只能上传在缓存目录中的文件)
const context = getContext(this)
const fileType = 'jpg'
// （以时间戳）生成一个新的文件名
const fileName = Date.now() + '.' + fileType
// 通过缓存路径+文件名 拼接出完整的路径
const copyFilePath = context.cacheDir + '/' + fileName
// 将文件 拷贝到 临时目录
const file = fs.openSync(uri, fs.OpenMode.READ_ONLY)
fs.copyFileSync(file.fd, copyFilePath)

第二步（拷）小结：

  1. 用上下文获取当前应用的缓存目录-> getContext().cacheDir
  2. 利用Date.now() 和 Math.random()结合随机生成图片名字filename，扩展名为jpg
  3. 利用 fs.openSync方法打开图片，准备拷贝到缓存目录 ->const file = fs.openSync(uri, fs.OpenMode.READ_ONLY)
  4. 利用fs.copyFileSync(file.fd, fullPath) 拷贝文件到缓存目录

第三步：上传，upload

上传的代码，实践中代码如下：

1715100543310.png

第三步（传）小结：

1、使用异步的方式进行文件上传

2、从AppStorage中获取相关信息

3、upLoadFile方法上传文件至POST型的api接口

4、使用progress的监听方式获取上传大小与总大小的信息，当上传大小等于总大小时，说明上传成功

四、总结

本次主要讲述了鸿蒙数据上传的三步骤大致程序。

总结整合如下：

三步骤都尽可能以异步方式设计

第一步（选）小结：

  1. 引导用户选择一张系统相册的照片，为图片选择器picker设置配置
  1. 创建图片选择对象并选择图片

第二步（拷）小结：

  1. 用上下文获取当前应用的缓存目录-> getContext().cacheDir
  2. 利用Date.now() 和 Math.random()结合随机生成图片名字filename，扩展名为jpg
  3. 利用 fs.openSync方法打开图片，准备拷贝到缓存目录 ->const file = fs.openSync(uri, fs.OpenMode.READ_ONLY)
  4. 利用fs.copyFileSync(file.fd, fullPath) 拷贝文件到缓存目录

第三步（传）小结：

  1. 从AppStorage中获取相关信息
  1. upLoadFile方法上传文件至POST型的api接口
  1. 使用progress的监听方式获取上传大小与总大小的信息，当上传大小等于总大小时，说明上传成功

更详细的解读以后有机会再呈上。

如需源代码，点赞并在评论区回复即可联系笔者获取。

avatar
文章
阅读
粉丝