写点什么

鸿蒙 NEXT 上传图片功能 PhotoViewPicker 核心功能解析

作者:飞龙AI
  • 2025-06-06
    四川
  • 本文字数:3059 字

    阅读完需:约 10 分钟

鸿蒙 NEXT 上传图片功能 PhotoViewPicker 核心功能解析 #ArkTS#鸿蒙 Next#HarmonyOS_SDK 应用服务 #HarmonyOS 语言

PhotoViewPicker 是鸿蒙系统中用于媒体资源选择的核心组件,通过它可以便捷地实现图片、视频等媒体文件的选择功能。下面从基本用法、参数配置到高级应用进行全面解析:

一、PhotoViewPicker 基础用法

PhotoViewPicker 的使用流程主要分为三步:


  1. 创建实例

  2. 配置参数

  3. 启动选择器获取结果


以下是最基本的使用示例:


import photoAccessHelper from "@ohos.photoAccess.photoAccessHelper";
async function pickImage() { try { // 1. 创建选择器实例 const picker = photoAccessHelper.createPhotoViewPicker();
// 2. 配置选择参数(此处使用默认配置) const options = { MIMEType: photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE, // 只选择图片 maxSelectNumber: 1, // 最多选择张数 isSearchSupported: true, // 显示搜索 isPhotoTakingSupported: true, // 支持拍照 recommendationOptions: true, // 智能推荐 preselectedUris: true, // 预览文件 isPreviewForSingleSelectionSupported: true, // 单选是否支持预览 };
// 3. 启动选择器并获取结果 const selectedAssets = await picker.select(options);
if (selectedAssets.photoUris.length) { // 处理选择的资源 console.info("选择的资源:", selectedAssets.photoUris); } } catch (error) { console.error("选择图片失败:", error); }}
复制代码

二、关键参数详解

PhotoViewPicker 的参数配置非常灵活,可以根据需求定制选择器的行为:


const options = {  MIMEType: photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE, // 只选择图片  maxSelectNumber: 1, // 最多选择张数  isSearchSupported: true, // 显示搜索  isPhotoTakingSupported: true, // 支持拍照  recommendationOptions: true, // 智能推荐  preselectedUris: true, // 预览文件  isPreviewForSingleSelectionSupported: true, // 单选是否支持预览};
复制代码

三、MIMEType 参数深度解析

MIMEType 参数是 PhotoViewPicker 中非常强大的一个配置项,它允许你精确控制选择器中显示的文件类型:


// 示例1:只允许选择JPEG和PNG图片IMAGE_TYPE = 'image/*',// 示例2:只允许选择视频文件VIDEO_TYPE = 'video/*',// 示例3:MOVING_PHOTO_IMAGE_TYPE = 'image/movingPhoto'// 示例4:允许所有IMAGE_VIDEO_TYPE = '*/*',
复制代码

四、处理选择结果

选择器返回的结果是一个 PhotoSelectResult 对象,包含以下关键属性:


class PhotoSelectResult {  /**   * The uris for the selected files.   *   * @type { Array<string> }   * @syscap SystemCapability.FileManagement.PhotoAccessHelper.Core   * @since 10   */  /**   * The uris for the selected files.   *   * @type { Array<string> }   * @syscap SystemCapability.FileManagement.PhotoAccessHelper.Core   * @atomicservice   * @since 11   */  /**   * The uris for the selected files.   *   * @type { Array<string> }   * @syscap SystemCapability.FileManagement.PhotoAccessHelper.Core   * @crossplatform   * @atomicservice   * @since 12   */  photoUris: Array<string>;  /**   * Original option.   *   * @type { boolean }   * @syscap SystemCapability.FileManagement.PhotoAccessHelper.Core   * @since 10   */  /**   * Original option.   *   * @type { boolean }   * @syscap SystemCapability.FileManagement.PhotoAccessHelper.Core   * @atomicservice   * @since 11   */  /**   * Original option.   *   * @type { boolean }   * @syscap SystemCapability.FileManagement.PhotoAccessHelper.Core   * @crossplatform   * @atomicservice   * @since 12   */  isOriginalPhoto: boolean;}
复制代码


  • 获取到资源后,通常需要进行以下处理:


  1. 使用文件 URI 读取文件内容

  2. 进行必要的格式转换(如压缩图片)

  3. 上传到服务器或保存到本地


// 这里以oss上传为例// uri为选择图片路径import { http } from '@kit.NetworkKit';import fs from '@ohos.file.fs'import { request } from '@kit.BasicServicesKit';export async function upload (uri: string): Promise<string> {  // 此处从服务器获取  const data = {    policy: 'qweqwe',    signature: 'qweqwe',    ossAccessKeyId: 'qweqwe',    host: 'https://???/api',  };  const name = Date.now() + '.' + uri.split('.').pop();  const key = `${new Date().getFullYear()}/${name}`  const context = getContext();  // 通过getContext获取沙箱地址  const destPath = `${context.cacheDir}/${name}`;  const file = fs.openSync(uri);  // 将文件复制一份到沙箱缓存地址,这一步尤为重要,只有沙箱地址的文件可以进行上传操作  fs.copyFileSync(file.fd, destPath);  const result = await request.uploadFile(context,{    // files字段是上传的文件组成的列表,类型为formData    files: [{ filename: 'file', name: 'file', uri: `internal://cache/${name}`, type: 'image/jpeg' }],    // data字段是携带的参数,建议把类型设置为formData    data: [      { name: 'name', value: `${name}`, },      { name: 'policy', value: `${data.policy}` },      { name: 'OSSAccessKeyId', value: Object.values(data)[2] },      { name: 'signature', value: `${data.signature}` },      { name: 'key', value: key },    ],    method: http.RequestMethod.POST,    header: {      Accept: '*/*',      // 设置header确保参数类型为FormData      "Content-Type": "multipart/form-data"    },    // 请求地址    url: data.host  });  return new Promise((res, rej) => {    result.on('progress', (u, t) => {      console.log('进度', u / t);    });    result.on('complete', e => {      console.log('ok', JSON.stringify(e));      res(`${data.host + key}`);    });    result.on('fail', e => {      console.log('错误', JSON.stringify(e));      rej(e);    })  });}
复制代码

五、注意事项与常见问题

  • 权限要求 需要在 config.json 中声明文件访问权限:


{  "requestPermissions": [    {      "name": "ohos.permission.READ_MEDIA",      "reason": "需要访问媒体文件"    }  ]}
复制代码


  • 文件处理注意

  • 系统媒体库中的文件 URI 通常是临时的,建议复制到应用私有目录再使用


const name = Date.now() + "";const key = `${new Date().toLocaleDateString()}/${name}`;const context = getContext();const destPath = `${context.cacheDir}/${name}`;const file = fileIo.openSync(uri);fileIo.copyFileSync(file.fd, destPath);console.log(destPath);
复制代码


  • 大文件处理时建议进行异步操作,避免 UI 卡顿

  • request.uploadFile文件上传时候一直报错 401

  • 兼容性注意

  • 不同鸿蒙版本的 API 可能存在差异,建议在开发前查阅对应版本的官方文档

  • 部分参数(如 title、initialDirectory)可能只在特定版本中支持


通过合理配置 PhotoViewPicker 的各项参数,开发者可以轻松实现符合需求的媒体选择功能,为应用增色不少。


用户头像

飞龙AI

关注

还未添加个人签名 2025-03-13 加入

还未添加个人简介

评论

发布
暂无评论
鸿蒙NEXT上传图片功能PhotoViewPicker核心功能解析_ArkTS_飞龙AI_InfoQ写作社区