鸿蒙：从图库选择图片并上传到服务器

前言：

我们安全访问相册是不需要任何权限的，上传则需要网络权限，这点需要注意。

我们还是老样子，看着官方文档进行学习，链接如下：

文档中心https://developer.huawei.com/consumer/cn/doc/harmonyos-faqs/faqs-image-22接下来，我就不多说了，直接上效果图和封装好的代码：

1、Index.ets

import { uploadImageUtil } from './UploadImageUtil'@Entry
@Component
struct Index {build() {Column() {Button('选择图片上传').width('100%').onClick(() => {uploadImageUtil.openPhotoPicker()})}.width('100%').height('100%').padding(16).justifyContent(FlexAlign.End)}
}

2、UploadImageUtil.ets

import { common } from '@kit.AbilityKit';
import { photoAccessHelper } from '@kit.MediaLibraryKit';
import { fileIo as fs } from '@kit.CoreFileKit';
import { request } from '@kit.BasicServicesKit';class UploadImageUtil {uiContext: UIContext = AppStorage.get('UIContext') as UIContextopenPhotoPicker() {// 获取应用文件路径let context = this.uiContext.getHostContext() as common.UIAbilityContext;let cacheDir = context.cacheDir;let photoPicker = new photoAccessHelper.PhotoViewPicker();photoPicker.select({MIMEType: photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE,maxSelectNumber: 1}, (_, result) => {if (result) {result.photoUris.forEach((uri) => {let file = fs.openSync(uri, fs.OpenMode.CREATE);// 复制文件到缓存目录下fs.copyFileSync(file.fd, cacheDir + '/test.jpeg');this.uploadImage(['internal://cache/test.jpeg']);})}})}private uploadImage(paths: string[]) {let allFiles = Array<request.File>();let header = new Map<Object, string>();header.set('Content-Type', 'multipart/form-data');header.set('key2', 'value2');for (let i = 0; i < paths.length; i++) {allFiles[i] = {name: 'image' + i + '.jpeg',filename: 'image' + i + '.jpeg',uri: paths[i],type: 'image'}}let data: Array<request.RequestData> = [{ name: 'name', value: 'value' }];let url = 'http://XXX&#34';this.uiContext.showAlertDialog({ message: "上传图片请使用自己的接口地址" })let uploadConfig: request.UploadConfig = {// 将这个url替换成你的接口地址url: url,header: header,method: 'POST',files: allFiles,data: data}try {request.uploadFile(this.uiContext.getHostContext(), uploadConfig, (error, uploadTask) => {if (uploadTask) {uploadTask.on('progress', (uploadSize: number, totalSize: number) => {console.info('progress,uploadedSize:' + uploadSize + ',totalSize:' + totalSize);})} else {console.info('upload failure:' + error);}})} catch (error) {console.info('upload failure:' + error);}}
}export const uploadImageUtil = new UploadImageUtil();

3、EntryAbility.ets

  onWindowStageCreate(windowStage: window.WindowStage): void {// Main window is created, set main page for this abilityhilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onWindowStageCreate');windowStage.loadContent('pages/Index', (err) => {
////···································添加下面的代码························let context = windowStage.getMainWindowSync().getUIContext()AppStorage.setOrCreate('UIContext', context)/////································}

4、补充：

网络权限在module.json5中添加

   "requestPermissions": [{"name": "ohos.permission.INTERNET"}
]

以上是个人经验分享