HarmonyOS 鸿蒙Next用户上传图片到服务器的实现

HarmonyOS 鸿蒙Next用户上传图片到服务器的实现

解决方案 首先这里需要用到鸿蒙的图片存取帮助类，他自带了安全机制，只授权给用户选取的图片。

import { photoAccessHelper } from '@kit.MediaLibraryKit'

  pickPhoto() {
    const photoSelectOptions = new photoAccessHelper.PhotoSelectOptions();
    photoSelectOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE; // 过滤选择媒体文件类型为IMAGE
    photoSelectOptions.maxSelectNumber = 1; // 选择媒体文件的最大数目

    let uris: Array<string> = [];
    const photoViewPicker = new photoAccessHelper.PhotoViewPicker();
    photoViewPicker.select(photoSelectOptions).then((photoSelectResult: photoAccessHelper.PhotoSelectResult) => {
      uris = photoSelectResult.photoUris;
      this.img = uris[0];
      this.status = "picked"

      this.finish = false
      this.uploadedSize = 0
      this.totalSize = 0

      console.info('photoViewPicker.select to file succeed and uris are:' + uris);
    }).catch((err: BusinessError) => {
      console.error(`Invoke photoViewPicker.select failed, code is ${err.code}, message is ${err.message}`);
    })
  }

这里我们只选取一张照片，所以把最大选取数目设成1

好了，比较关键的地方来了，因为这个选取器得到的是一个内部的URI，你不能直接用这个URI保存文件或传到服务器，我这里提供一个方法，可以将这个URL转化成

PixelMap类型，这样你就可以写入文件

  _Copy = (fileuri: string) => {
    let context = getContext(this)
    console.log('applog:fileuri:' + fileuri);
    fileIo.open(fileuri, fileIo.OpenMode.READ_ONLY).then(async (file) => {
      console.info("applog:file fd: " + file.fd);

      let pixelMap = await ImageUtil.getPixelMap(file.fd)
      if (pixelMap != undefined) {
        pixelMap = await ImageUtil.square(pixelMap)

        let newpath = context.cacheDir + "/ceshi.jpg";
        await ImageUtil.saveImageFile(newpath, pixelMap)
        this._Upfile(newpath);
      }
    }).catch((err: Error) => {
      console.info("applog:open file failed with error message: " + err.message + ", error code: ");
    });
  }

但是你这个时候拿到的文件，你就可以通过另外一个方法，把他传到你的服务器上面去

  _Upfile = (fileuri: string) => {
    console.log('applog:fileuri' + fileuri)
    this.status = "start upfile"
    let realuri = "internal://cache/" + fileuri.split("cache/")[1];
    console.log('applog:realuri' + realuri);
    let uploadConfig: request.UploadConfig = {
      url: `${API_UPLOAD_HEAD_IMAGE}?userRecordId=${getUserRecordId()}`,
      header: {},
      method: "POST",
      files: [{ filename: "ceshi.jpg", name: "headImage", uri: realuri, type: "jpg" }],
      data: [{ name: "userRecordId", value: getUserRecordId() }],
    };

    try {
      request.uploadFile(getContext(this), uploadConfig).then((data: request.UploadTask) => {
        let uploadTask = data;
        this.status = "upfile2"
        console.log('applog2');
        let upProgressCallback = (uploadedSize: number, totalSize: number) => {
          if (uploadedSize >= totalSize) {
            this.finish = true
            uploadTask.off('progress', (uploadedSize: number, totalSize: number) => {
              uploadTask.remove()
            });
          }
          this.uploadedSize = uploadedSize
          this.totalSize = totalSize
          this.status = `${uploadedSize}/${totalSize}`
          console.info("applog:upload totalSize:" + totalSize + "  uploadedSize:" + uploadedSize);
        };

        uploadTask.on('progress', upProgressCallback);
      }).catch((err: Error) => {
        console.error('Failed to request the upload. Cause: ' + JSON.stringify(err));
      });
    } catch (err) {
      console.error('applog:'+JSON.stringify(err));
      console.error('err.code : ' + err.code + ', err.message : ' + err.message);
    }
  }

好了，用这个方法，你可以使用鸿蒙自带的图片安全控件选取用户手机相册的图片传到服务器上去了！