HarmonyOS 鸿蒙Next 通过拍照和选择相册方式选择图片后 将图片上传到服务端

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

HarmonyOS 鸿蒙Next 通过拍照和选择相册方式选择图片后 将图片上传到服务端

HarmonyOS 通过拍照和选择相册方式选择图片后 将图片上传到服务端?

2 回复

可以参考demo:

import { BusinessError } from '@ohos.base';
import { rcp } from '@kit.RemoteCommunicationKit';
import { picker } from '@kit.CoreFileKit';
import fs from '@ohos.file.fs';
import { http } from '@kit.NetworkKit';
let uploadUrl: string = 'http://xxxxxxxxx:8080/upload';

function example01(): string {
  let uri = '';
  let photoViewPicker = new picker.PhotoViewPicker();
  let photoSelectOption = new picker.PhotoSelectOptions();
  photoSelectOption.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE;
  photoViewPicker.select(photoSelectOption).then((photoSelectResult) => {
    console.log("fyh photoSelectResult:" + photoSelectResult);
    uri = photoSelectResult.photoUris[0];
    console.log("fyh uri:" + uri);
    try {
      let resultPhoto = fs.openSync(uri,fs.OpenMode.READ_ONLY);
      let resultName = resultPhoto.name;
      let fileTemp = fs.openSync(getContext().filesDir+resultPhoto.name,fs.OpenMode.READ_WRITE|fs.OpenMode.CREATE);
      let imageUri = fileTemp.path;
      fs.copyFileSync(resultPhoto.fd,fileTemp.fd);
      fs.closeSync(resultPhoto);
      fs.closeSync(fileTemp);
      const httpRequest = http.createHttp();
      httpRequest.request(uploadUrl,{
        method:http.RequestMethod.POST,
        header:{
          'Content-Type': 'multipart/form-data',
          'Connection':'keep-alive'
        },
        expectDataType:http.HttpDataType.ARRAY_BUFFER,
        multiFormDataList: [
          {
            name:'file',
            contentType: 'image/jpg',
            filePath: imageUri,
            remoteFileName:'file.jpg'
          },
        ],
      },(err,data) => {
        console.log('fyh:上传结束')
        httpRequest.destroy();
      }
      )
    } catch (err) {
      console.error(`fyh:Failed to request the upload. err: ${JSON.stringify(err)}`);
    }

  }).catch((err:BusinessError) => {
    console.error(`Invoke photoViewPicker.select failed, code is ${err.code}, message is ${err.message}`);
  })
  return uri;
}
function testRcpMultiPartUpload() {
  example01();
}

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .onClick(() => {
            testRcpMultiPartUpload();
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

在HarmonyOS鸿蒙Next系统中,通过拍照或选择相册中的图片并上传到服务端的过程,通常涉及以下几个步骤:

  1. 获取图片

    • 拍照:使用系统相机API进行拍照,并将照片保存到应用指定的临时存储位置。
    • 选择相册:通过文件选择器API让用户从相册中选择图片,同样保存到临时存储位置。
  2. 图片处理

    • 对获取的图片进行必要的处理,如压缩、裁剪等,以适应上传需求。
    • 转换为适合上传的格式(如JPEG、PNG)。
  3. 上传图片

    • 使用网络请求库(如OkHttp、Retrofit等)构建HTTP POST请求。
    • 在请求体中包含处理后的图片数据,通常作为MultipartFile或Base64编码的字符串。
    • 发送请求到服务端,并处理服务端返回的响应。
  4. 错误处理

    • 捕获并处理网络异常、文件读写异常等可能发生的错误。
    • 提供用户友好的错误提示。
  5. 安全性

    • 确保上传过程的安全性,如使用HTTPS协议、对敏感信息进行加密等。

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

回到顶部