HM-文件上传

鸿蒙应用开发–文件上传

业务需求

唤起相册 –> 从相册选择图片 –> 将相册选择的图片上传到服务器

前置知识点：

1. @ohos.file.picker选择器模块 –> PhotoViewPicker –> 从API version 12开始废弃。建议使用photoAccessHelper.PhotoViewPicker替代
2. fileIo –> fileIo.openSync | fileIo.writeSync | fileIo.closeSync –> 文件管理模块
3. @ohos.request (上传下载)模块 –> request.uploadFile

业务实现流程：

async putUserAvatar(){
// TODO  用户选择图片
  // 1. 创建一个图片选择器实例对象
  const photoPick = new picker.PhotoViewPicker()
  // const xxx = new photoAccessHelper.PhotoViewPicker()

  // 2. 调用selected方法打开相册
  const res = await photoPick.select({
    MIMEType: picker.PhotoViewMIMETypes.IMAGE_TYPE, // 用户可选择的文件类型
    maxSelectNumber: 3    // 用户可选择的文件数量
  })
  
// TODO 判断是否选择图片
  // 判断是否选择了图片
  if (!res.photoUris) {
    return
  }
  // AlertDialog.show({ message: res.photoUris[0], alignment: DialogAlignment.Center })

  // TODO 将文件复制到缓存目录，后续从缓存目录获取图片并上传
  // fileIo.copyFileSync('要复制的文件路径','复制到的目标文件路径')
  // fileIo.copyFileSync('要复制的文件fd','复制到的目标文件路径')

  // 3. 获取app上下文
  const context = getContext(this)
  // 4. 拿到上下文中的缓存目录路径，作为后面保存图片的文件夹
  const targetPath = `${context.cacheDir}/xxx.jpg`
  // 5. 以只读方式打开图片文件，拿到文件对象
  const photoObj = fileIo.openSync(res.photoUris[0], fileIo.OpenMode.READ_ONLY)

  // 6. 从图片对象中获取图片id ，复制文件到目标文件夹
  try {
    fileIo.copyFileSync(photoObj.fd, targetPath)
  } catch (err) {
    AlertDialog.show({ message: JSON.stringify(err), alignment: DialogAlignment.Center })
  }

  // TODO 将缓存在cache中的图片文件上传
  // request.uploadFile()返回的是个Promise对象，Promise.then返回的值.on监听其上传成功或失败
  const task = await request.uploadFile(context, {
    url: 'https://hmajax.itheima.net/api/uploadimg',
    method: http.RequestMethod.POST,
    header: {
      "content-type": 'multipart/form-data'
    },
    data: [], // 额外提交的数据。后端要求的话就填，没有要求给一个空数组，这是一个必填属性
    files: [{
      filename: 'xxx.jpg', // 这个文件名，一定要带后缀
      name: 'img',    // 这个值需要看接口文档，Body参数的名字
      uri: "internal://cache/xxx.jpg",
      type: 'jpg'
    }]
  })
  task.on('complete', () => {
    promptAction.showToast({ message: '头像上传成功' })
  })
  task.on('fail', () => {
    promptAction.showToast({ message: '头像上传失败' })
  })
  // TODO 获取上传图片的结果，结果返回一个图片存储路径，渲染到视图
  // 后端返回的数据在res.body中，可以log一下res，看一下数据结构组成
  task.on('headerReceive', (res) => {
    let upRes = res as IRes
    let url = (JSON.parse(upRes.body) as IBody).data.url
    this.img = url
  })
}