HarmonyOS鸿蒙Next中如何调用系统相册选择头像图片并上传

HarmonyOS鸿蒙Next中如何调用系统相册选择头像图片并上传 想问如何点击一张默认头像图后调用系统相册选择头像图片，并可以在裁剪后将这张图片更新到头像图中，并可将头像图片POST到服务端的URL？有没有示例代码呢？

4 回复 
调用系统相册选择图片可使用PhotoViewPicker，参考链接：

1. [https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/photoaccesshelper-photoviewpicker-V5](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/photoaccesshelper-photoviewpicker-V5)

2. [https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-photoaccesshelper-V5#photoviewpicker](https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-photoaccesshelper-V5#photoviewpicker)

图片裁剪可以参考demo：

[https://developer.huawei.com/consumer/cn/codelabsPortal/carddetails/tutorials_NEXT-ImageEdit](https://developer.huawei.com/consumer/cn/codelabsPortal/carddetails/tutorials_NEXT-ImageEdit)

图片大小压缩可参考demo：

[https://gitee.com/harmonyos-cases/cases/tree/master/CommonAppDevelopment/feature/imagecompression#%E9%AB%98%E6%80%A7%E8%83%BD%E7%9F%A5%E8%AF%86%E7%82%B9](https://gitee.com/harmonyos-cases/cases/tree/master/CommonAppDevelopment/feature/imagecompression#%E9%AB%98%E6%80%A7%E8%83%BD%E7%9F%A5%E8%AF%86%E7%82%B9)

文件上传可参考：

[https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/app-file-upload-download-V5#%E4%B8%8A%E4%BC%A0%E5%BA%94%E7%94%A8%E6%96%87%E4%BB%B6](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/app-file-upload-download-V5#%E4%B8%8A%E4%BC%A0%E5%BA%94%E7%94%A8%E6%96%87%E4%BB%B6)

更多关于HarmonyOS鸿蒙Next中如何调用系统相册选择头像图片并上传的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


使用picker调用系统相册，然后选择图片，将图片裁剪（需要一个图片裁剪的第三方库），然后将裁剪完的图片转换为base64或者pixelmap，根据接口字段需要什么给是，post到接口上

在HarmonyOS鸿蒙Next中，调用系统相册选择头像图片并上传可以通过[@ohos](/user/ohos).file.picker模块实现。首先，使用PhotoViewPicker选择图片，获取文件的URI。然后，通过[@ohos](/user/ohos).file.fs模块读取文件内容，最后使用[@ohos](/user/ohos).net.http模块上传文件。

以下是简要步骤：

  1. 导入模块：

    import picker from '[@ohos](/user/ohos).file.picker';
import fs from '[@ohos](/user/ohos).file.fs';
import http from '[@ohos](/user/ohos).net.http';

  2. 选择图片：

    let photoPicker = new picker.PhotoViewPicker();
let result = await photoPicker.select({
    maxSelectNumber: 1
});
let fileUri = result[0].uri;

  3. 读取文件内容：

    let file = fs.openSync(fileUri, fs.OpenMode.READ_ONLY);
let buffer = new ArrayBuffer(1024);
let readLen = fs.readSync(file.fd, buffer);
fs.closeSync(file);

  4. 上传文件：

    let httpRequest = http.createHttp();
let options = {
    method: http.RequestMethod.POST,
    header: {
        'Content-Type': 'multipart/form-data'
    },
    extraData: {
        file: buffer
    }
};
let response = await httpRequest.request('https://example.com/upload', options);

在HarmonyOS鸿蒙Next中，调用系统相册选择头像图片并上传的步骤如下：

  1. 引入依赖：确保在build.gradle中引入@ohos.file.picker模块。

  2. 创建选择器：使用PhotoViewPicker类创建图片选择器实例。

  3. 配置选择器：通过PhotoSelectOptions配置选择参数，如选择数量和MIME类型。

  4. 启动选择器：调用select()方法启动选择器，并监听PhotoSelectResult返回结果。

  5. 处理结果：从PhotoSelectResult中获取选中的图片URI。

  6. 上传图片：使用@ohos.request模块将图片上传至服务器。

示例代码：

import picker from '@ohos.file.picker';
import request from '@ohos.request';

let photoPicker = new picker.PhotoViewPicker();
let photoSelectOptions = new picker.PhotoSelectOptions();
photoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE;
photoSelectOptions.maxSelectNumber = 1;

photoPicker.select(photoSelectOptions).then((photoSelectResult) => {
    let uri = photoSelectResult.photoUris[0];
    // 上传图片逻辑
    request.upload({ url: 'your_server_url', files: [{ uri: uri }] });
}).catch((err) => {
    console.error('Failed to select photo:', err);
});

确保在config.json中声明相关权限，如ohos.permission.READ_MEDIA。

回到顶部