HarmonyOS鸿蒙Next中上传本地图片或者拍照上传到后端服务器

HarmonyOS鸿蒙Next中上传本地图片或者拍照上传到后端服务器 鸿蒙上传本地图片或者拍照上传到后端服务器有示例吗？

5 回复

上传图片到服务器需要申请网络权限：ohos.permission.INTERNET。

从图库选择图片并上传到服务器，可参考以下示例代码：

import { request } from '@kit.BasicServicesKit';
import { fileIo as fs } from '@kit.CoreFileKit';
import { photoAccessHelper } from '@kit.MediaLibraryKit';
import { common } from '@kit.AbilityKit';
@Entry
@Component
struct Index {
  private openPhotoPicker() {
    // Obtain the application file path 
    let context = this.getUIContext().getHostContext() as common.UIAbilityContext;
    let cacheDir = context.cacheDir;
    let photoPicker = new photoAccessHelper.PhotoViewPicker();
    photoPicker.select({
      MIMEType: photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE,
      maxSelectNumber: 1
    }, (_, result) => {
      if (result) {
        result.photoUris.forEach((uri) => {
          let file = fs.openSync(uri, fs.OpenMode.CREATE);
          // Copy the file to the cache directory
          fs.copyFileSync(file.fd, cacheDir + '/test.jpeg');
          this.uploadImage(['internal://cache/test.jpeg']);
        })
      }
    })
  }
  private uploadImage(paths: string[]) {
    let allFiles = Array<request.File>();
    let header = new Map<Object, string>();
    header.set('Content-Type', 'multipart/form-data');
    header.set('key2', 'value2');
    for (let i = 0; i < paths.length; i++) {
      allFiles[i] = {
        name: 'image' + i + '.jpeg',
        filename: 'image' + i + '.jpeg',
        uri: paths[i],
        type: 'image'
      }
    }
    let data: Array<request.RequestData> = [{ name: 'name', value: 'value' }];
    let uploadConfig: request.UploadConfig = {
      url: 'http://XXX&#34',
      header: header,
      method: 'POST',
      files: allFiles,
      data: data
    }
    try {
      request.uploadFile(this.getUIContext().getHostContext(), uploadConfig, (error, uploadTask) => {
        if (uploadTask) {
          uploadTask.on('progress', (uploadSize: number, totalSize: number) => {
            console.info('progress,uploadedSize:' + uploadSize + ',totalSize:' + totalSize);
          })
        } else {
          console.info('upload failure:' + error);
        }
      })
    } catch (error) {
      console.info('upload failure:' + error);
    }
  }
  build() {
    Column() {
      Button('选择图片上传')
        .width('100%')
        .onClick(() => {
          this.openPhotoPicker();
        })
    }
    .width('100%')
    .height('100%')
    .padding(16)
    .justifyContent(FlexAlign.End)
  }
}

更多关于HarmonyOS鸿蒙Next中上传本地图片或者拍照上传到后端服务器的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


大佬有关于这个自用的工具类吗？，

你项目里用的什么网络类？ axios 库吗？ 最好是根项目里用同样的网络请求库！上面的代码是系统的最简单的request类。就一个函数uploadFile，要啥封装啊。。。，

在HarmonyOS Next中，上传本地图片或拍照上传到后端服务器，主要使用@ohos.file.fs和@ohos.request模块。首先通过picker选择本地图片或调用相机拍照获取图片URI，然后使用fs模块读取文件数据，转换为ArrayBuffer或Base64格式。最后通过request模块的uploadFile方法，将文件数据作为multipart/form-data格式上传到服务器指定接口。整个过程需在UIAbility中处理，并确保应用已申请ohos.permission.READ_IMAGEVIDEO和ohos.permission.CAMERA权限。

在HarmonyOS Next中，实现图片选择（本地图库或拍照）并上传到服务器，主要涉及@ohos.file.picker（选择器）和@ohos.net.http（网络请求）等模块。以下是核心步骤和代码示例：

1. 选择图片（拍照或从图库）

使用PhotoViewPicker选择单张图片，或ImagePicker选择多张。

示例：选择单张图片

import { picker } from '@ohos.file.picker';
import { BusinessError } from '@ohos.base';

// 创建PhotoViewPicker实例
const photoSelectOptions = new picker.PhotoSelectOptions();
photoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE; // 选择图片类型
photoSelectOptions.maxSelectNumber = 1; // 选择1张图片

const photoViewPicker = new picker.PhotoViewPicker();
try {
  const photoSelectResult = await photoViewPicker.select(photoSelectOptions);
  const uri = photoSelectResult.photoUris[0]; // 获取图片uri
  console.info('PhotoViewPicker selected uri: ', uri);
  // 后续上传处理
} catch (err) {
  const error = err as BusinessError;
  console.error('PhotoViewPicker failed. Code: ', error.code, ' Message: ', error.message);
}

2. 上传图片到服务器

获取图片文件后，使用@ohos.net.http发起网络请求上传。

示例：通过FormData上传

import { http } from '@ohos.net.http';
import { fileIo } from '@ohos.fileio';
import { BusinessError } from '@ohos.base';

async function uploadImage(fileUri: string) {
  let httpRequest = http.createHttp();
  let formData = new FormData();

  // 读取文件并添加到FormData
  let file = await fileIo.open(fileUri, fileIo.OpenMode.READ_ONLY);
  let fileStat = await fileIo.stat(fileUri);
  let fileContent = new ArrayBuffer(fileStat.size);
  await fileIo.read(file.fd, fileContent);
  await fileIo.close(file.fd);

  formData.append('file', new Blob([fileContent]), 'image.jpg'); // 构造Blob对象
  formData.append('key', 'value'); // 其他表单字段

  let options = {
    method: http.RequestMethod.POST,
    header: { 'Content-Type': 'multipart/form-data' },
    extraData: formData
  };

  try {
    let response = await httpRequest.request('https://your-server.com/upload', options);
    console.info('Upload result: ', response.result);
  } catch (err) {
    const error = err as BusinessError;
    console.error('Upload failed. Code: ', error.code, ' Message: ', error.message);
  }
}

关键配置

  • 权限声明：在module.json5中声明所需权限。
{
  "module": {
    "requestPermissions": [
      {
        "name": "ohos.permission.INTERNET"
      },
      {
        "name": "ohos.permission.READ_IMAGEVIDEO"
      },
      {
        "name": "ohos.permission.MEDIA_LOCATION" // 若需要图片位置信息
      }
    ]
  }
}
  • ArkTS约束：使用PhotoViewPicker时，需在EntryAbility.ets的onWindowStageCreate中调用windowStage.loadContent。

注意事项

  • 使用PhotoViewPicker或ImagePicker前，确保UI已加载完成。
  • 上传大文件时，建议使用分片上传或进度提示优化体验。
  • 服务器端需支持对应的multipart/form-data请求解析。

以上示例提供了从图片选择到上传的基本流程，可根据实际业务调整参数和处理逻辑。

回到顶部