鸿蒙应用开发-选择图库照片上传至服务器（request.uploadFile（））

这篇文章主要介绍如何在鸿蒙应用开发中实现选择本地图库照片并上传至服务器的功能。将通过三个主要步骤：选择图片、拷贝到缓存目录、上传到服务器，来解释l整个过程，在关键步骤中加入必要的注意事项和坑点。

模拟器不能正确显示但截图后第一个位置有图片

第一步：用户选择图片

在鸿蒙系统中，使用PhotoViewPicker对象来实现图片选择功能。代码示例中定义了一个pickerAvatar函数，负责引导用户选择一张图片，并返回该图片的内存地址（URI）。

代码解析：

tsconst options = new picker.PhotoSelectOptions
options.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE // 指定只能选择图片类型
options.maxSelectNumber = 1 // 用户只能选择一张图片

• 注意：设置MIMEType确保用户只能选择图片，防止选择其他文件类型导致程序错误。

  tsconst pickerView = new picker.PhotoViewPicker()
  let urls = await pickerView.select(options)
  if (urls.photoUris.length  {
      Logger.info('上传大小' + uploadedSize, '总大小：' + totalSize)
      if (uploadedSize === totalSize) {
        AlertDialog.show({ message: '上传已完成' })
      }
  })

  • 注意：在上传文件时，监听上传进度可以用于调试，还可以增强用户交互体验。通过progress事件，我们能够实时更新用户界面，展示上传进度。

  • 

  • 

    总结

    上面案例中在鸿蒙系统开发中实现从选择图片到上传图片，并增加了进度监控功能。在实现时应注意文件类型的正确性、文件命名的唯一性、网络请求的安全性。

    完整封装函数代码：

    //1.用户选择图片后返回一个内存地址
    async pickerAvatar() {
      //1.引导用户选择一张系统相册照片
      //1.1绑定用户只能从系统相册选择一张图片
      const options = new picker.PhotoSelectOptions
      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  {
        Logger.info('上传大小' + uploadedSize, '总大小：' + totleSize)
        if (uploadedSize === totleSize) {
          AlertDialog.show({ message: '上传已完成' })
        }
      })
    }