HarmonyOS 鸿蒙Next能否提供一个选择相册图片或者拍照并上传到服务端的demo

发布于 1周前 作者 songsunli 来自 鸿蒙OS

HarmonyOS 鸿蒙Next能否提供一个选择相册图片或者拍照并上传到服务端的demo

能否提供一个选择相册图片、拍照文件并上传到服务端的demo 

3 回复

参考下:

selectPicture() {
  try {
    let PhotoSelectOptions = new photoAccessHelper.PhotoSelectOptions();
    PhotoSelectOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE;
    PhotoSelectOptions.maxSelectNumber = 1;
    let photoPicker = new photoAccessHelper.PhotoViewPicker();
    photoPicker.select(PhotoSelectOptions).then((PhotoSelectResult: photoAccessHelper.PhotoSelectResult) => {
      console.info('==SY==PhotoViewPicker.select successfully, PhotoSelectResult uri: ' +
      JSON.stringify(PhotoSelectResult.photoUris));
      this.uploadImage(PhotoSelectResult.photoUris[0])
    }).catch((err: BusinessError) => {
      console.error(`PhotoViewPicker.select failed with err: ${err.code}, ${err.message}`);
    });
  } catch (error) {
    let err: BusinessError = error as BusinessError;
    console.error(`PhotoViewPicker failed with err: ${err.code}, ${err.message}`);
  }
}

uploadImage(uri:string){
  const resFile = fs.openSync(uri, fs.OpenMode.READ_ONLY)
  let newPath = `${getContext().cacheDir}/${resFile.name}`;
  fs.copyFileSync(resFile.fd, newPath)
  console.info('uri = ' + uri, 'newPath = ' + newPath)
  let files: Array<request.File> = [
    {
      filename: resFile.name,
      name: 'file',
      uri: `internal://cache/${resFile.name}`,
      type: 'image/png'
    }
  ]
  let header = new Map<Object, string>()
  let uploadConfig: request.UploadConfig = {
    url: 'http://xxxx',
    header: header,
    method: 'POST',
    files: files,
    data: []
  };
  try {
    request.uploadFile(getContext(), uploadConfig).then((data: request.UploadTask) => {
      console.error('uploadFile')
      console.error(`${JSON.stringify(data)}`)
      data.on('complete', (taskStates: Array<request.TaskState>) => {
        console.info(`upload complete taskState: ${JSON.stringify(taskStates[0])}`);
      });
      data.on('headerReceive', (headers: object) => {
        console.info("upOnHeader headers:" + JSON.stringify(headers));
      })
      data.on('fail', (taskStates: Array<request.TaskState>) => {
        for (let i = 0; i < taskStates.length; i++) {
          console.info("upOnFail taskState:" + JSON.stringify(taskStates[i]));
        }
      })
    }).catch((err: BusinessError) => {
      console.error(`Failed to request the upload. Code: ${err.code}, message: ${err.message}`);
    });
  } catch (err) {
    console.error(`Failed to request the upload. err: ${JSON.stringify(err)}`);
  }
}

更多关于HarmonyOS 鸿蒙Next能否提供一个选择相册图片或者拍照并上传到服务端的demo的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


HarmonyOS 鸿蒙Next确实支持实现选择相册图片或者拍照并上传到服务端的功能。以下是一个简化的示例流程,不涉及具体代码实现,但会概述关键步骤:

  1. 权限申请

    • config.json中声明必要的权限,包括相机、相册访问及网络访问权限。
  2. UI设计

    • 设计两个按钮,一个用于选择相册图片,另一个用于启动相机拍照。
    • 设计一个图片展示区域用于预览选中的图片。
  3. 功能实现

    • 使用MediaStore API实现相册图片的选择。
    • 使用相机API实现拍照功能。
    • 选中或拍摄图片后,利用BitmapFactory加载图片并展示。
    • 将图片转换为字节数组,通过HTTP请求(如使用OkHttp库)上传到服务端。
  4. 上传处理

    • 构建HTTP POST请求,将图片数据作为请求体发送至服务端接口。
    • 处理服务端响应,确认图片是否成功上传。

请注意,上述描述为简化流程,实际开发中需考虑异常处理、UI线程切换等细节。具体实现需参考HarmonyOS官方文档及API指南。

如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html

回到顶部