前言
在学习上传图库图片到服务器前，先学习一下这篇帖子ArkTS(3.0与3.1)前端和SpringBoot后端文件上传示例(Request.upload)怎么上传文件到服务器的，然后看一下如何从图库选择图片文档选择用户文件有了这方面知识后，实现上传图库图片到服务器就是这么简单了。如图：
知识点
PhotoViewPicker
图库选择器对象，用来支撑选择图片/视频和保存图片/视频等用户场景。在使用前，需要先创建PhotoViewPicker实例。
示例：
letphotoPicker =newpicker.PhotoViewPicker();复制
select
select(option?: PhotoSelectOptions) : Promise<PhotoSelectResult>复制
通过选择模式拉起photoPicker界面，用户可以选择一个或多个图片/视频。接口采用promise异步返回形式，传入可选参数PhotoSelectOptions对象，返回PhotoSelectResult对象。
参数：
参数名类型必填说明
optionPhotoSelectOptions否photoPicker选择选项，若无此参数，则默认选择媒体文件类型为图片和视频类型，选择媒体文件数量的最大值为50。
返回值：
类型说明
Promise<PhotoSelectResult>Promise对象。返回photoPicker选择后的结果集
示例：
asyncfunction example() {try{letPhotoSelectOptions =newpicker.PhotoSelectOptions(); PhotoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE; PhotoSelectOptions.maxSelectNumber =5;letphotoPicker =newpicker.PhotoViewPicker(); photoPicker.select(PhotoSelectOptions).then((PhotoSelectResult) => { console.info('PhotoViewPicker.select successfully, PhotoSelectResult uri: '+JSON.stringify(PhotoSelectResult)); }).catch((err) => { console.error('PhotoViewPicker.select failed with err: '+ err); }); }catch(err) { console.error('PhotoViewPicker failed with err: '+ err); }}复制
实例源码
import picker from'@ohos.file.picker';import common from'@ohos.app.ability.common';import fs from'@ohos.file.fs';import request from'@ohos.request';// 获取应用文件路径letcontext = getContext(this) as common.UIAbilityContext;letcacheDir = context.cacheDir;// 上传任务配置项letuploadConfig = { url:'http://192.168.3.48:8740/file/upload', header: { key1:'Content-Type', key2:'multipart/form-data'}, method:'POST', files: [ { filename:'test.jpg', name:'test', uri:'internal://cache/test.jpg', type:'jpg'} ], data: [ { name:'fileId', value:'FP000008'} ]}@Entry@Componentstruct Index { @State message: string =''@State imgSrc: string =''async selectImage() {try{letPhotoSelectOptions =newpicker.PhotoSelectOptions(); PhotoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE; PhotoSelectOptions.maxSelectNumber =1;letphotoPicker =newpicker.PhotoViewPicker(); photoPicker.select(PhotoSelectOptions).then((PhotoSelectResult) => { console.info('xx PhotoViewPicker.select successfully, PhotoSelectResult uri: '+JSON.stringify(PhotoSelectResult));// 从图库选择图片后，返回图片urileturi = PhotoSelectResult.photoUris[0]; console.info('xx uri:'+ uri)this.imgSrc = uri// 读取上面返回uriletfile = fs.openSync(uri, fs.OpenMode.CREATE);// 复制文件到缓存目录下fs.copyFileSync(file.fd, cacheDir +'/test.jpg')// 上传文件到服务器上this.uploadImage() }).catch((err) => { console.error('xx PhotoViewPicker.select failed with err: '+ err); }); }catch(err) { console.error('xx PhotoViewPicker failed with err: '+ err); } } uploadImage() {// 将本地应用文件上传至网络服务器try{ request.uploadFile(context, uploadConfig) .then((uploadTask) => { uploadTask.on('complete', (taskStates) => {for(leti =0; i < taskStates.length; i++) { console.info(`xx upload complete taskState: ${JSON.stringify(taskStates[i])}`);this.message =JSON.stringify(taskStates[i]) } }); }) .catch((err) => { console.error(`xx Invoke uploadFile failed, code is ${err.code}, message is ${err.message}`);this.message = err.message }) }catch(err) { console.error(`xx Invoke uploadFile failed, code is ${err.code}, message is ${err.message}`);this.message = err.message } } build() { Column({space:30}) { Button('打开图库') .width('80%').height('40') .onClick(() => {this.selectImage() }) Image(this.imgSrc) .width('50%').height('50%') Text(this.message) .fontSize(20).width('100%') } .width('100%').height('100%') .padding(10) }}复制
