前言导读
各位网友和同学，相信大家在开发app的过程中都有遇到上传图片到服务器的需求，我们一般是有两种方式，拍照获取照片或者调用相册获取照片，今天我们就分享一个小案例讲一下这两种情况的实现。废话不多说我们正式开始
效果图
nimg.cn/direct/f9b831e0d5cf41c484dd1fced7c58385.gif)
具体实现
export async function fileSelect(): Promise<string> {let photoSelectOptions = new picker.PhotoSelectOptions();photoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE;photoSelectOptions.maxSelectNumber = 1;let photoPicker = new picker.PhotoViewPicker();try {let photoSelectResult = await photoPicker.select(photoSelectOptions);if (photoSelectResult && photoSelectResult.photoUris && photoSelectResult.photoUris.length > 0) {let imgUri = photoSelectResult.photoUris[0];if (imgUri.indexOf('media/Photo')<0) {showToast($r('app.string.prompt_select_img'));return '';}return photoSelectResult.photoUris[0];} else {return '';}} catch (err) {Logger.error('SelectedImage failed', JSON.stringify(err));return '';}
}export async function cameraSelect(cameraPosition: Array<camera.CameraPosition>,mediaType: Array<cameraPicker.PickerMediaType>,context:Context): Promise<string> {try {let pickerProfile: cameraPicker.PickerProfile = { cameraPosition: cameraPosition[1] };let pickerResult: cameraPicker.PickerResult = await cameraPicker.pick(context,[mediaType[0]], pickerProfile);let uri = pickerResult.resultUri;return uri;hilog.info(0x0000, ' ', "the pick pickerResult is:" + JSON.stringify(pickerResult));} catch (error) {let err = error as BusinessError;Logger.error( `the pick call failed. error code: `);return '';}}
界面实现
import { cameraPicker } from '@kit.CameraKit';
import { camera } from '@kit.CameraKit';
import { cameraSelect, fileSelect } from './Camerautils';@Entry
@Component
struct Index {@State imageUri: Resource | string | undefined = undefined;private cameraPosition: Array<camera.CameraPosition> = [camera.CameraPosition.CAMERA_POSITION_UNSPECIFIED, camera.CameraPosition.CAMERA_POSITION_BACK,camera.CameraPosition.CAMERA_POSITION_FRONT, camera.CameraPosition.CAMERA_POSITION_FOLD_INNER];private mediaType: Array<cameraPicker.PickerMediaType> = [cameraPicker.PickerMediaType.PHOTO, cameraPicker.PickerMediaType.VIDEO];selectImage() {fileSelect().then((uri: string) => {this.imageUri = uri || '';});}openphoto(){cameraSelect(this.cameraPosition,this.mediaType,getContext(this)).then((uri: string) => {this.imageUri = uri || '';});}build() {Row() {Column() {Image(this.imageUri).height(200).alt($r('app.media.startIcon'))Button("从相册获取").width(200).margin({ top: 20}).onClick(()=>{this.selectImage()})Button("拍照").width(200).margin({ top: 20}).onClick(async () => {this.openphoto()})}.width('100%')}.height('100%')}
}
我们在主界面写2个button来触发我们拍照动作和我们的从相册获取, 拍照的时候我们是需要去申请权限，获取到权限之后才能拍照拿到对应的照片。这里需要强调 无论是从相册获取照片还是拍照获取照片都是需要真机， 并且是next系统,鸿蒙4.2版本上面代码会报错api不同。我们拿到图片的uri然后通过赋值给我们的装饰器 ，来刷新我们image组件来显示。
最后总结
鸿蒙next 无论是拍照获取照片uri 还是从相册获取照片uri 都比较简单，大家有真机的可以去尝试，获取到照片然后提交给服务器把整个前后端的交互完善 。 如果有其他的需求方面可以在文章地下留言。老师看到了都会回复的，更多鸿蒙next 开发相关知识的学习和交流都可以关注我掘金专栏或者B站的课程。
如果需要学习更多鸿蒙的知识可以关注我B站教程
课程地址
B站课程地址：www.bilibili.com/cheese/play…
项目内容:
-
1 常用布局组件的学习
-
2 网络请求工具类封装
-
3 arkui 生命周期启动流程
-
4 日志工具类的封装
-
5 自定义组合组件的封装
-
6 路由导航跳转的使用
-
7 本地地数据的缓存 以及缓存工具类的封装
-
8 欢迎页面的实现
-
9 登录案例和自动登录效果实现
-
10 请求网络数据分页上拉加载 下拉刷新的实现
-
11 list数据懒加载实现
-
12 webview组件的使用
团队介绍
团队介绍：作者： 坚果派-徐庆 坚果派由坚果等人创建，团队由12位华为HDE以及若干热爱鸿蒙的开发者和其他领域的三十余位万粉博主运营。专注于分享 HarmonyOS/OpenHarmony，ArkUI-X，元服务，仓颉，团队成员聚集在北京，上海，南京，深圳，广州，宁夏等地，目前已开发鸿蒙 原生应用，三方库60+，欢迎进行课程，项目等合作。
