【鸿蒙应用开发】从相册中选择图片并上传至服务器

本文如今适配API本事级别为API 12 Release
   

• 目录
  前言
  一、ohos.file.photoAccessHelper (相册管理模块)
  二、使用步调
  1.导入模块
  2.实例化图库选择器对象
  3、拉起相册
  4、从图库选择后的效果集中获取uri
  5、打开文件获取文件形貌符
  6、将图片文件复制到缓存目录
  7、上传图片
  总结
  

  

---

前言

头像上传是APP开发中的常见功能，本文介绍的是在HarmonyOS应用开发的过程中要实现头像上传的基本步调流程

---

一、ohos.file.photoAccessHelper (相册管理模块)

相册管理模块ohos.file.photoAccessHelper为ArkTS提供的API，该模块提供了相册管理模块本事，包罗创建相册以及访问、修改相册中的媒体数据信息等，本文主要使用的是相册的访问本事。
二、使用步调

1.导入模块

代码如下（示例）：

1. import { photoAccessHelper } from '@kit.MediaLibraryKit';
2. import { fileIo as fs } from '@kit.CoreFileKit';

复制代码

2.实例化图库选择器对象

实例化图库选择对象，用来支撑选择图片/视频等用户场景
代码如下（示例）：

1.     const photoPicker = new photoAccessHelper.PhotoViewPicker()

复制代码

3、拉起相册

调用图库选择器对象的select方法拉起相册并设置参数
代码如下（示例）：

1.       //调用select方法拉起相册，该方法返回的选择结果是一个Promise对象
2.       const pickerRes = await photoPicker.select({
3.       //配置可选择的媒体类型，此处选择的是图片类型
4.       MIMEType: photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE,
5.       // 选择媒体文件数量的最大值（最大可以设置的值为500，若不设置则默认为50）
6.       maxSelectNumber: 1
7.     })

复制代码

4、从图库选择后的效果集中获取uri

从pickerRes中获取到图库选择后的媒体文件uri数组
代码如下（示例）：

1. //返回的对象的属性photoUris的类型是一个数组
2. const photoUrl = pickerRes.photoUris[0]

复制代码

5、打开文件获取文件形貌符

调用@ohos.file.fs (文件管理)模块的openSync方法以同步方法打开文件，该方法返回的是打开的File对象，通过返回的File对象获取到文件形貌符
代码如下（示例）：

1.     //以只读的方式打开文件
2.     const photoFd = fs.openSync(photoUrl, fs.OpenMode.READ_ONLY).fd

复制代码

6、将图片文件复制到缓存目录

通过上下文对象获取到当前的缓存目录，调用@ohos.file.fs 模块的copyFile方法将缓存图片文件复制到缓存目录中
示例代码如下：

1.     //获取上下文对象
2.     const ctx = getContext(this)
3.     // 以当前的时间戳作为存储到缓存目录的文件名
4.     const fileName = Date.now()
5.     await fs.copyFile(photoFd, ctx.cacheDir + '/' + `${fileName}.jpg`)

复制代码

留意：此处复制文件的时间待复制的图片直接传入pickerRes中的图片路径大概会出现上传失败的情况，个人猜测如今大概只支持以文件形貌符的方式复制文件
7、上传图片

调用request对象的uploadFile方法将缓存目录中的图片上传到服务器中，该方法返回的是一个UploadTask对象，通过UploadTask对象的事件方法可以订阅上传任务进度

1.     // 上传图片
2.     const task = await request.uploadFile(ctx, {
3.       url: 'https://test.com/test',
4.       header: {
5.         'content-type': 'multipart/form-data',
6.         Authorization: 'Bearer ' + this.currentUser.token
7.       },
8.       method: http.RequestMethod.POST,
9.       files: [{
10.         filename: fileName + '.jpg',
11.         uri: `internal://cache/${fileName}.jpg`,
12.         name: 'file',
13.         type: 'jpg'
14.       }],
15.       data: []
16.     })

复制代码

留意：上传头像时直接使用pickerRes中的图片路径也出现了上传失败的情况， 参考官方文档从缓存目录中上传才气成功，个人猜测是Harmony为了维护用户安全做出的一些限定

---

总结

以上就是今天要分享的有关HarmonyOS应用开发中图片上传的相干内容，如有勘误欢迎留言或私信，更多关于相册管理模块的API方法请参考官方文档。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。