HarmonyOS 鸿蒙Next如何从系统相册选择图片并转化成数据上传到服务器

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

HarmonyOS 鸿蒙Next如何从系统相册选择图片并转化成数据上传到服务器 如何从系统相册选择图片，然后把图片转化成数据上传到服务器

Harmonyos Next教程
3 回复

可参考上传下载demo：https://gitee.com/harmonyos_samples/upload-and-down-load

也可以看下下面参考示例：

import request from '@ohos.request';
import picker from '@ohos.file.picker';
import fs, { ReadOptions } from '@ohos.file.fs';
import common from '@ohos.app.ability.common';

// 获取应用文件路径
let context = getContext(this) as common.UIAbilityContext;
let cacheDir = context.cacheDir;

@Entry
@Component
struct page {
  @State picture: string = '';

  private openPhotoPicker() {
    let photoPicker = new picker.PhotoViewPicker();
    photoPicker.select({ MIMEType: picker.PhotoViewMIMETypes.IMAGE_TYPE, maxSelectNumber: 1 }, (error, result) => {
      if (result) {
        this.picture = result.photoUris[0]
        result.photoUris.forEach(uri => {
          let file = fs.openSync(uri, fs.OpenMode.CREATE);
          // 复制文件到缓存目录下
          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('key1', 'value1');
    header.set('key2', 'value2');

    for (let i = 0; i < paths.length; i++) {
      let path = paths;
      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",
      header: header,
      method: 'POST',
      files: allFiles,
      data: data
    }

    try {
      request.uploadFile(getContext(this), uploadConfig, (error, response) => {
        if (response) {
          response.on('progress', (uploadedSize: number, totalSize: number) => {
            console.log("progress, uploadedSize: " + uploadedSize + ", totalSize: " + totalSize)
          })
        } else {
          console.log("upload failure: " + error)
        }
      });
    } catch (error) {
      console.log("upload failure: " + error)
    }
  }

  build() {
    Column() {
      Image(this.picture)
        .backgroundColor(Color.Red)
        .width('60%')
        .aspectRatio(16 / 9)
        .onClick(async () => {
          // 1、选择图片
          // 2、存储沙箱
          // 3、文件上传
          this.openPhotoPicker();
        })
    }
    .width('100%')
    .height('100%')
  }
}

更多关于HarmonyOS 鸿蒙Next如何从系统相册选择图片并转化成数据上传到服务器的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


从系统相册选择图片并将其转化为数据上传到服务器的主要步骤如下：

1、权限设置 ： 确保应用已经获取了读取系统相册的权限，即ohos.permission.READ_IMAGEVIDEO 1。如果未设置权限，可以通过picker方式调用接口来查询指定uri对应的图片资源。

2、选择图片 ： 使用@ohos.file.photoAccessHelper模块的getAssets方法获取图片资源。需要设置合适的参数来满足的需求，例如可以设置过滤条件只获取图片文件。

import { dataSharePredicates } from '@kit.ArkData';
import { photoAccessHelper } from '[@ohos](/user/ohos).file.photoAccessHelper';

async function selectPicture() {
    let predicates: dataSharePredicates.DataSharePredicates = new dataSharePredicates.DataSharePredicates();
    let fetchOptions: photoAccessHelper.FetchOptions = {
        fetchColumns: [],
        predicates: predicates
    };

    try {
        let fetchResult: photoAccessHelper.FetchResult<photoAccessHelper.PhotoAsset> = await photoAccessHelper.getAssets(fetchOptions);
        if (fetchResult !== undefined) {
            console.info('fetchResult success');
            let photoAsset: photoAccessHelper.PhotoAsset = await fetchResult.getFirstObject();
            if (photoAsset !== undefined) {
                console.info('photoAsset.displayName :' + photoAsset.displayName);
            }
        }
    } catch (err) {
        console.error('Error in selecting picture: ' + err.message);
    }
}

3、处理和上传图片数据 ： 选定图片后，需要处理这些数据以便于上传。这通常包括裁剪、缩放和转换图片格式等步骤。使用@ohos.multimedia.image模块可以进行图片处理。

import { image } from '@kit.ImageKit';
import { fileIo } from '@kit.CoreFileKit';

let modelInputHeight: number = 224;
let modelInputWidth: number = 224;

// 打开文件
let file = fileIo.openSync(photoAsset.uri, fileIo.OpenMode.READ_ONLY);
console.info('File fd: ' + file.fd);

// 读取文件数据
let inputBuffer = new ArrayBuffer(4096000);
let readLen = fileIo.readSync(file.fd, inputBuffer);
console.info('InputBuffer size is:' + readLen);

// 创建PixelMap并进行处理
let imageSource = image.createImageSource(file.fd);
let pixelMap = await imageSource.createPixelMap();
let info = await pixelMap.getImageInfo();
console.info('Original width: ' + info.size.width, 'Original height: ' + info.size.height);

// 裁剪图片
await pixelMap.crop({
    x: 16, y: 16, size: { height: modelInputHeight, width: modelInputWidth }
});

info = await pixelMap.getImageInfo();
console.info('Cropped width: ' + info.size.width, 'Cropped height: ' + info.size.height);

// 读取像素数据
let readBuffer = new ArrayBuffer(modelInputHeight * modelInputWidth * 4);
await pixelMap.readPixelsToBuffer(readBuffer);

4、上传数据 ： 处理完图片数据后，可以使用合适的网络API将数据发送到服务器。这一步骤具体实现取决于的后端服务和网络配置。

通过以上步骤，可以实现在鸿蒙系统中从系统相册选择图片，并将图片数据上传到服务器的功能。

在HarmonyOS鸿蒙Next系统中，从系统相册选择图片并转化成数据上传到服务器的流程，通常涉及以下几个步骤：

  1. 请求权限：首先，应用需要请求读取存储权限，以便访问系统相册。这通常在应用的manifest.json文件中声明，并在运行时向用户请求权限。

  2. 选择图片：使用HarmonyOS提供的图片选择器API，让用户从系统相册中选择图片。这通常通过调用系统服务或特定的UI组件实现。

  3. 读取图片数据：用户选择图片后，应用需要读取图片数据。这可以通过文件读取API完成，将图片文件转化为字节数组或Base64编码的字符串。

  4. 上传数据：将图片数据通过HTTP或HTTPS协议上传到服务器。这通常使用网络请求库，如HarmonyOS提供的网络请求API，设置请求的URL、方法（如POST）、请求头和请求体（包含图片数据）。

  5. 处理响应：服务器接收到图片数据后，会返回响应。应用需要处理这个响应，例如检查上传是否成功，或处理服务器返回的错误信息。

如果在这个过程中遇到具体问题，如权限请求失败、图片选择器无法正常工作、数据上传失败等，可以检查相关API的使用是否正确，以及服务器端的配置是否支持接收上传的图片数据。如果问题依旧没法解决请联系官网客服，官网地址是 https://www.itying.com/category-93-b0.html 。

回到顶部