【鸿蒙】- HarmonyOS Next中实现图片上传

前言

在手机APP中，图片上传功能为用户提供了便捷的方式来分享和传递视觉信息。无论是在社交媒体上分享旅行照片、美食体验，还是在工作场合中提交项目进展报告、展示设计成果，用户都能通过图片上传功能轻松实现。这一功能的实现，不仅满足了用户对于信息分享和传递的需求，还使用户可以更加直观地表达自己的想法和感受，与他人进行更加丰富的交流。

实现步骤

在鸿蒙系统中，图片上传功能通过简单三步即可完成：首先选择图片，随后将图片拷贝至缓存目录，最后执行上传操作。接下来就让我们一起来看看具体如何实现的吧。

选择相册图片

因为选择图片需要用到 picker,接下来让简单介绍一下Picker。

选择器(Picker)是一个封装PhotoViewPicker、DocumentViewPicker、AudioViewPicker等API模块，具有选择与保存的能力。应用可以自行选择使用哪种API实现文件选择和文件保存的功能。其中我们主要使用的是PhotoViewPicker。

PhotoViewPicker（图库选择器对象），用来支撑选择图片/视频和保存图片/视频等用户场景。

更多的详情请参考选择用户文件 (openharmony.cn)

具体的实现逻辑如下：

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

// 一、定义图片选择 Picker 的配置
// 实例化 选项对象
const photoSelectOptions = new picker.PhotoSelectOptions();
// 过滤选择媒体文件类型为IMAGE
photoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE; 
// 选择媒体文件的最大数目
photoSelectOptions.maxSelectNumber = 1; 


// 二、创建 图片选择对象并选择图片
const photoViewPicker = new picker.PhotoViewPicker();
// 调用 select 方法，传入选项对象
 photoViewPicker.select(photoSelectOptions).then(res=>{
    const uri = res.photoUris[0]
    // 因为只选了一张
    AlertDialog.show({ message: '图片路径为:' + uri })
 })

拷贝图片到缓