HarmonyOS 图片上传

---

前言

在手机APP中，图片上传功能为用户提供了便捷的方式来分享和传递视觉信息。无论是在社交媒体上分享旅行照片、美食体验，还是在工作场合中提交项目进展报告、展示设计成果，用户都能通过图片上传功能轻松实现。

一、HarmonyOS中图片上传的步骤

在鸿蒙系统中，图片上传功能通过简单三步即可完成：

1. 选择图片
2. 将图片拷贝至应用沙箱目录
3. 发请求上传图片

二、具体上传步骤

1. 选择图片

选择图片需要用到 photoAccessHelper.Photoviewpicker 图库选择器对象，用来支撑选择图片/视频等用户场景。在使用前，需要先创建PhotoViewPicker实例。
代码如下（示例）：

//1. 打开相册选择一张图
    //选择图片的参数
    const options = new photoAccessHelper.PhotoSelectOptions()
    //指定文件类型是图片
    options.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE
    //选择一张图
    options.maxSelectNumber = 1
    //创建相册选择器
    const picker  = new photoAccessHelper.PhotoViewPicker()
    //去选图片
    const selectResult = await picker.select(options)
    //取到选择图片的uri完整路径
    const uri = selectResult.photoUris[0]

2. 将图片拷贝至应用沙箱目录

代码如下（示例）：

    // 以只读模式打开指定的文件，通过传入的uri参数确定要打开的文件位置
    const file = fileIo.openSync(uri, fileIo.OpenMode.READ_ONLY)
    // 构建一个新的文件路径，存储拷贝后的文件
    const filePath = getContext(this).cacheDir + '/' + file.name
    // 将打开的文件同步的复制到新构建的文件路径
    fileIo.copyFileSync(file.fd, filePath)
    // 关闭打开的文件，释放资源
    fileIo.closeSync(file.fd)
    // 创建一个新的FormData对象，用于准备文件上传 这是axios上传图片需要的对象类型 FormData
    const formData = new FormData()
    // 添加一个名字叫file的数据  数据需要 `internal://cache/在沙箱目录的文件地址`
    formData.append('file', `internal://cache/${file.name}`)

如果想要压缩后再上传的话就需要这样写：

// 2. 相册中的图片需要压缩后上传
    // 2.1 根据相册图片生成 ImageSource 对象
    const originFile = fileIo.openSync(uri, fileIo.OpenMode.READ_ONLY)
    const imageSource = image.createImageSource(originFile.fd)
    // 2.2 使用 packing 压缩图片，二进制图片数据
    const imagePacker = image.createImagePacker()
    const arrayBuffer = await imagePacker.packing(imageSource, { format: 'image/jpeg', quality: 70 })
    // 2.3 存储到沙箱目录
    const newFilePath = getContext(this)
      .cacheDir + '/' + originFile.name
    const newFile = fileIo.openSync(newFilePath, fileIo.OpenMode.CREATE | fileIo.OpenMode.READ_WRITE)
    fileIo.writeSync(newFile.fd, arrayBuffer)
    // 2.4 创建一个 formData
    const formData = new FormData()
    formData.append('file',`internal://cache/${newFile.name}`)
    logger.debug('newFile', fileIo.statSync(newFile.fd).size.toString())
    fileIo.closeSync(newFile.fd)

3. 发送请求，上传图片

例如：

    await http.request<null>({
      url: 'userInfo/avatar',
      method: 'post',
      headers:{
        "Content-Type": 'multipart/form-data'
      },
      data: formData,
      context: getContext(this)
    })
    // 上传成功+更新头像
    const user = await http.request<User>({url: 'userInfo'})
    this.user.avatar = user.avatar
    auth.setUser(this.user)

---

总结

1. 引导用户选择一张系统相册的照片，为图片选择器photoAccessHelper设置配置，创建图片选择对象并选择图片
2. 以只读模式打开指定的文件，通过传入的uri参数确定要打开的文件位置，拷贝选择的图片到应用沙箱
3. 发送请求，上传图片