前言导读

各位网友和同学，相信大家在开发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+，欢迎进行课程，项目等合作。