Harmony OS5鸿蒙中如何上传图片_华为鸿蒙5系统移动经纪人无法上传照片
1.前期准备
因为模拟器没有办法拍照,所以我们可以通过模拟器的截图,给相册存几张照片
也可以通过文件管理=>下载与接收=>下载管理器 可以把喜欢的本地图片拖进去
返回之后再重新进一下 就会看到图片 =>点击分享=>保存到图库,在图库里就会看到这张照片
2.选择系统相册中的图片
//a.导入图片访问助手这个选择器模块,用于拉起图库import { photoAccessHelper } from \'@kit.MediaLibraryKit\';Button(\'上传照片\').onClick(async()=>{ try{ //b.将来选择资源时,需要提供一个选项对象(因为照片你得设置最多可以选多少,可以选哪种类型的//所以需要一个对象里面去存放) let options = new photoAccessHelper.PhotoSelectOption()//c.创建图库选择器实例 options.maxSelectNumber = 9 //配置用户最大可以选择的相册内的数量 options.MIMEType = photoAccessHelper.PhotoViewMiMETypes.IMAGE_TYPE//配置用户在相册中选择的文件类型//以上是对用户选择相册中内容的设置//接下来是如何选择图片,这里以图片举例//图库选择器对象用于支持选择图片,视频等用户场景,使用前 ,需要先创建PhotoViewPicker实例let picker = photoAccessHelper.photoViewPicker()const res = await picker.select(options)//通过选择模式拉起图库,select里面传 //我们刚才对于选择图库内容的一些设置,带着要求去拉起图库,选择图片 //补充:为什么要用await 因为文档要求select这个接口采用promise异步返回形式 // res.photoUris[0]文件在手机中存储位置 } catch(e){console.log(e)} })3.将选择的照片复制到cacheDir 鸿蒙中只允许上传缓存目录下的文件
import { photoAccessHelper } from \'@kit.MediaLibraryKit\';import { fileIo as fs } from \'@kit.CoreFileKit\';//导入文件管理模块,用于文件复制Button(\'上传照片\').onClick(async()=>{ try{ let options = new photoAccessHelper.PhotoSelectOption() options.maxSelectNumber = 9 options.MIMEType = photoAccessHelper.PhotoViewMiMETypes.IMAGE_TYPE let picker = photoAccessHelper.photoViewPicker() const res = await picker.select(options) //打开文件 let file = fs.openSync(res.photoUri[0])//打开文件在手机中储存位置 //获取缓存目录 =>想要获取缓存目录 需要getContext()获取上下(当前环境) let fileType = \'jpg\' let fileName = Date.now() + \'.\'+fileType let copyPath = getContext().cacheDir+\'/\'+fileName//需要复制到哪个目录的完整路径 fs.copyFileSync(file.fd , copyPath)//拷贝完成 //如何检查是否复制成功 /*编辑器右侧的Devices Files Browser=>data=>app=>el2=>100=>base=>包名 =>haps/entry/cache/xxx.jpg*/ } catch(e){console.log(e)} })4.上传图片
import { photoAccessHelper } from \'@kit.MediaLibraryKit\';import { fileIo as fs } from \'@kit.CoreFileKit\';import { request } from \'@kit.BasicServicesKit\';//导入request模块interface HeaderType { // 只需要用body body: string}interface BodyType { message: string data: Data}interface Data { url: string}@Entry@Component struct Index{@State imgUrl:string=\'\' build(){ Column(){Button(\'上传照片\').onClick(async()=>{ try{ let options = new photoAccessHelper.PhotoSelectOption() options.maxSelectNumber = 9 options.MIMEType = photoAccessHelper.PhotoViewMiMETypes.IMAGE_TYPE let picker = photoAccessHelper.photoViewPicker() const res = await picker.select(options)//打开文件 let file = fs.openSync(res.photoUri[0]) let fileType = \'jpg\' let fileName = Date.now() + \'.\'+fileType let copyPath = getContext().cacheDir+\'/\'+fileName fs.copyFileSync(file.fd , copyPath) const uploadTask = await request.uploadFile(getContext(),{ url:\'\',//上传的服务器接口地址 header:{ ContentType:\'multipart/form-data\'//告诉后端传过去的类型,是个多部分的内容 },//上传图片配置请求头 extraData:{ }, method:http.RequestMethod.POST, //要上传的图片对象 files:[ { filename:fileName, name:\'img\',//传递到后端时对应的键名(在接口文档中找) type:fileType, uri:`internal://cache/${fileName}`,//图片的位置.要求必须按这个格式传 } ], data:[{}],//额外传递给后端的数据 } ) //监听任务的headerReceive Http响应事件 可以拿到 uploadTask.on(\'headerReceive\',(header)=>{ let obj = JSON.parse(header as HeaderType).body as BodyType promptAction.showToast({message:obj.message}) this.imgurl = obj.data.url }) } catch(e){console.log(e)} })Image(this.imgUrl).width(80) } }}
