HarmonyOS 编辑头像,上传图片

目标：选择相册图片更新用户头像

前置知识：

• photoAccessHelper.Photoviewpicker 图库选择器对象，用来支撑选择图片/视频等用户场景。在使用前，需要先创建PhotoViewPicker实例。

1）打开相册选择图片

async updateAvatar() {
    // 1. 选择相册照片
    // 选择照片配置
    const photoSelectOptions = new photoAccessHelper.PhotoSelectOptions()
    photoSelectOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE
    photoSelectOptions.maxSelectNumber = 1
    // 选择照片对象
    const photoPicker = new photoAccessHelper.PhotoViewPicker()
    const photoResult = await photoPicker.select(photoSelectOptions)
    const uri = photoResult.photoUris[0]
    
  }

2）存储图片到应用沙箱

    this.dialog.open()
    // 2. 拷贝选择的图片到应用沙箱
    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)
    const formData = new FormData()
    formData.append('file', `internal://cache/${file.name}`)

3）提交更新头像请求

// 3. 提交数据
    const url = await http.request<string>({
      url: 'userInfo/avatar',
      method: 'post',
      data: formData,
      headers: { 'Content-Type': 'multipart/form-data' },
      context: getContext(this)
    })
    const user = await http.request<User>({ url: 'userInfo' })
    this.user.avatar = user.avatar
    auth.setUser(this.user)
    promptAction.showToast({ message: '更新头像成功' })
    this.dialog.close()