图片上传picker,鸿蒙星河版since API(11)

定义方法采用了async/await异步调用 

  // 选择系统相册图片,获取路径
  async pickerAvatar() {
    //  1. 实例化选择参数对象
    const options = new picker.PhotoSelectOptions()
    options.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE // 表示从相册中选择图片
    options.maxSelectNumber = 1 // 表示只选择一张

    //   2. 实例化选择器对象
    const pickerView = new picker.PhotoViewPicker()
    //   3. 调用选择器对象上的select方法传入参数对象即可完成选择
    let res = await pickerView.select(options)

    //打印
    // AlertDialog.show({ message: JSON.stringify(res.photoUris) })

    //   4. 判断用户取消了选择图片,则组织下面代码的继续运行
    if (res.photoUris.length === 0) {
      promptAction.showToast({ message: "用户取消图片选择" })
      return
    }
    //   4.1 准备好一个图片的完整路径
    let ext = 'jpg' // 图片扩展名
    let fileName = Date.now().toString() // 图片名称
    let cacheDir = getContext().cacheDir // 获取应用程序的缓存目录
    let fullPath = cacheDir + '/' + fileName + '.' + ext // 完整的图片路径
    let fullFileName = fileName + '.' + ext
    //   4.2 利用fs拷贝图片
    let file = fs.openSync(res.photoUris[0], fs.OpenMode.READ_ONLY)
    fs.copyFileSync(file.fd, fullPath)
    // AlertDialog.show({ message: '图片拷贝成功' })

    //   5. 利用request.uploadFile方法完成应用程序缓存目录下的文件上传操作
    //   5.1 缓存文件路径
    this.dialog.open()
    let uploadFilePath = `internal://cache/${fullFileName}`
    //   5.2 准备reqeust
    let uploador = await request.uploadFile(getContext(), {
      method: 'POST',
      url: 'http://xxx.xxxx.xxxxx/avatar',
      header: {
        "Content-Type": "multipart/form-data",
        "Authorization": `Bearer ${this.currentUser.token}`
      },
      // name:指的是接口中的body中的参数名称,不能写错一定要和接口保持一致
      // uri:指的是应用程序缓存中的图片
      //filename:文件名称
      // type:文件类型,也就是扩展名
      files: [{ name: 'file', uri: uploadFilePath, filename: fullFileName, type: ext }],
      data: [] // 因为本接口除了上传文件之外,无需接收其他文本数据,所以空着即可
    })

    //   5.3 注册uploador对象上的两个事件,一个是progress用来监听上传进度,一个是fail用来监听上传失败的异常获取
    //  这个回调函数是随着文件的上传会被不间断的触发执行,每次的uploadSize的值会增加,但是totalSize永远都是当前上传图片的大小
    //   所以我们可以通过判断 uploadSize === totalSize 表示上传完成,我们就可以做完成后端 逻辑处理
    //   由于此函数会被多次调用,所以我们可以在这个函数中计算处当前上传的进度百分比
    uploador.on('progress', (uploadSize, totalSize) => {

      // Logger.info('上传:', uploadSize + ' / ' + totalSize)
      let parcentStr = ((uploadSize / totalSize) * 100).toFixed(0).toString()
      Logger.info('上传:', parcentStr)
      // this.message = '完成' + parcentStr
      emitter.emit({ eventId: 0 }, {
        data: {
          msg: '完成:' + parcentStr + "%"
        }
      })

      if (uploadSize === totalSize) {
        // AlertDialog.show({ message: '图片上传完成' })
        // 调用服务器接口获取最新头像赋值给AppStorage('user')中的头像字段
        this.ReflshUserData()

        this.dialog.close()
      }

    })

    //  监听上传失败的事件
    uploador.on('fail', (err) => {
      AlertDialog.show({ message: JSON.stringify(err) })
      this.dialog.close()
    })
  }

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值