软件开发和网站开发难度,网站返回指定位置怎么做,apple 网站模板,网站免费软件下载#效果图 #思路 ##步骤#xff1a;
###一、利用picker api选择1张图片
实例化选择器参数(使用new PhotoSelectOptions())实例化图片选择器 (使用newPhotoViewPicker() )调用图片选择器的select方法传入选择器参数完成图片选取获得结果
利用picker api选择1张图片 async sele…#效果图 #思路 ##步骤
###一、利用picker api选择1张图片
实例化选择器参数(使用new PhotoSelectOptions())实例化图片选择器 (使用newPhotoViewPicker() )调用图片选择器的select方法传入选择器参数完成图片选取获得结果
利用picker api选择1张图片 async selectImage(maxnum: number) {// 1.1 实例化选择参数let opts new picker.PhotoSelectOptions()opts.MIMEType picker.PhotoViewMIMETypes.IMAGE_TYPEopts.maxSelectNumber maxnum// 1.2 打开相册来选择照片返回选择相册照片的数组let viewer new picker.PhotoViewPicker()let res await viewer.select(opts)return res.photoUris} //点击头像 .onClick(async () { // 1. 使用picker选择相册中的图片 let urls await this.selectImage(1) AlertDialog.show({message:JSON.stringify(urls[0])}) // 2. 利用fs将相册图片拷贝到缓存目录中 // 3. 利用reqeust.uploadFile完成图片上传 }) ##拷贝选择图片到缓存目录 // 2. 拷贝到应用程序缓存目录async copyToCacheDir(photoImagePath: string) {// 1. 使用openSync将相册中的图片加载到内存中得到内存的数字指向let file fs.openSync(photoImagePath, fs.OpenMode.READ_ONLY)// 2. 使用copyFileSync完成图片拷贝到应用程序缓存中let dir getContext().cacheDirlet type jpglet filename Date.now() . typelet fullpath dir / filenamefs.copyFileSync(file.fd, fullpath)// 3. 返回文件名和文件的扩展名// [123123234.jpg,jpg]return [filename, type]} //点击头像 .onClick(async () { // 1. 使用picker选择相册中的图片 let urls await this.selectImage(1) // AlertDialog.show({ message: JSON.stringify(urls[0]) }) // 2. 利用fs将相册图片拷贝到缓存目录中 let fileInfo await this.copyToCacheDir(urls[0]) AlertDialog.show({ message: JSON.stringify(fileInfo, null, 2) }) }) ###二、利用 request.uploadFile 进行图片上传
准备好参数调用request.uploadFile()获得上传对象 uploader Content-Type: multipart/form-data 给uploader对象注册progress事件监听上传进度 requestRes.on(progress, (uploadedSize: number, totalSize: number){})给uploader对象注册fail事件监听报错信息requestRes.on(fail, (taskStates) {}
这是接口文档需要的参数
// 3. 头像上传async upload(filename: string, type: string) {let uploador await request.uploadFile(getContext(), {method: POST,url: 接口地址,header: {Content-Type: multipart/form-data,Authorization: Bearer ${this.currentUser.token}},files: [{filename: filename,type: type,name: file,uri: internal://cache/ filename}],data: []})// 1.监控文件上传失败事件// 不能监听所有异常uploador.on(fail, (err) {// AlertDialog.show({ message: fail-- JSON.stringify(err, null, 2) })Logger.error(头像上传失败, JSON.stringify(err))})// 2. 监控服务器响应回来的数据uploador.on(headerReceive, (res) {// AlertDialog.show({ message: 完成-- JSON.stringify(res, null, 2) })})}.onClick(async () { // 1. 使用picker选择相册中的图片 let urls await this.selectImage(1) // AlertDialog.show({ message: JSON.stringify(urls[0]) }) // 2. 利用fs将相册图片拷贝到缓存目录中 let fileInfo await this.copyToCacheDir(urls[0]) // AlertDialog.show({ message: JSON.stringify(fileInfo, null, 2) }) // 3. 利用reqeust.uploadFile完成图片上传 await this.upload(fileInfo[0], fileInfo[1]) }) ###三、get请求userInfo接口刷新用户数据更新AppStorage(user)中的用户缓存数据 // 获取登录用户数据 StorageLink(user) currentUser: iLoginUserModel {} as iLoginUserModel // 2. 监控服务器响应回来的数据 uploador.on(headerReceive, async (res) { // AlertDialog.show({ message: 完成-- JSON.stringify(res, null, 2) }) // 这个方法一旦触发那么服务器的头像已经上传完毕并且更新了 // 这是去重新获取https://ap........中的头像地址就是我们上传以后的新的头像地址 let newUserInfo await HdHttp.Getobject(hm/userInfo) this.currentUser.avatar newUserInfo.data[avatar] // AlertDialog.show({ message: JSON.stringify(老头像地址this.currentUser.avatar 新的头像地址 newUserInfo.data[avatar]) }) }) ##综合代码 import { iLoginUserModel } from ../models/datamodel import { picker } from kit.CoreFileKitimport fs from ohos.file.fs;import { request } from kit.BasicServicesKit; import { Logger } from ../utils/Logger;import { HdHttp } from ../utils/request; Entry Component struct ProfileEditPage { // 获取登录用户数据 StorageLink(user) currentUser: iLoginUserModel {} as iLoginUserModel // 获取安全区域高度数据 StorageProp(topHeight) topHeight: number 0 // 1. 使用picker选择相册中的图片 async selectImage(maxnum: number) { // 1.1 实例化选择参数 let opts new picker.PhotoSelectOptions() opts.MIMEType picker.PhotoViewMIMETypes.IMAGE_TYPE opts.maxSelectNumber maxnum // 1.2 打开相册来选择照片返回选择相册照片的数组 let viewer new picker.PhotoViewPicker() let res await viewer.select(opts) return res.photoUris } // 2. 拷贝到应用程序缓存目录 async copyToCacheDir(photoImagePath: string) { // 1. 使用openSync将相册中的图片加载到内存中得到内存的数字指向 let file fs.openSync(photoImagePath, fs.OpenMode.READ_ONLY) // 2. 使用copyFileSync完成图片拷贝到应用程序缓存中 let dir getContext().cacheDir let type jpg let filename Date.now() . type let fullpath dir / filename fs.copyFileSync(file.fd, fullpath) // 3. 返回文件名和文件的扩展名 // [123123234.jpg,jpg] return [filename, type] } // 3. 头像上传 async upload(filename: string, type: string) { let uploador await request.uploadFile(getContext(), { method: POST, url: 后台给的接口地址, header: { Content-Type: multipart/form-data, Authorization: Bearer ${this.currentUser.token} }, files: [ { filename: filename, type: type, name: file, uri: internal://cache/ filename } ], data: [] }) // 1.监控文件上传失败事件 // 不能监听所有异常 uploador.on(fail, (err) { // AlertDialog.show({ message: fail-- JSON.stringify(err, null, 2) }) Logger.error(头像上传失败, JSON.stringify(err)) }) // 2. 监控服务器响应回来的数据 uploador.on(headerReceive, async (res) { // AlertDialog.show({ message: 完成-- JSON.stringify(res, null, 2) }) // 这个方法一旦触发那么服务器的头像已经上传完毕并且更新了 // 这是去重新获取https://api-.........中的头像地址就是我们上传以后的新的头像地址 let newUserInfo await HdHttp.Getobject(hm/userInfo) this.currentUser.avatar newUserInfo.data[avatar] // AlertDialog.show({ message: JSON.stringify(老头像地址this.currentUser.avatar 新的头像地址 newUserInfo.data[avatar]) }) }) } build() { Navigation() { Stack() { List() { ListItem() { Row() { Text(头像) // 回显用户头像 Image(this.currentUser.avatar || $rawfile(avatar.png)) .width((40)) .width((40)) .borderRadius((40)) .border({ width: 0.5, color: #e4e4e4 }) .onClick(async () { // 1. 使用picker选择相册中的图片 let urls await this.selectImage(1) // AlertDialog.show({ message: JSON.stringify(urls[0]) }) // 2. 利用fs将相册图片拷贝到缓存目录中 let fileInfo await this.copyToCacheDir(urls[0]) // AlertDialog.show({ message: JSON.stringify(fileInfo, null, 2) }) // 3. 利用reqeust.uploadFile完成图片上传 await this.upload(fileInfo[0], fileInfo[1]) }) }.width(100%).height((60)).justifyContent(FlexAlign.SpaceBetween) } ListItem() { Row() { Text(昵称) // 回显用户昵称 TextInput({ text: this.currentUser.nickName || 昵称 }) .textAlign(TextAlign.End) .layoutWeight(1) .padding(0) .height((60)) .backgroundColor(Color.Transparent) .borderRadius(0) .onSubmit(() { // 修改昵称 this.updateNickName()//待完善 }) }.width(100%).height(60).justifyContent(FlexAlign.SpaceBetween) } } .width(100%) .height(100%) .padding({ left: (45), right: (45), top: (15), bottom: (15) }) .divider({ strokeWidth: 0.5, color: #f5f5f5 }) }.width(100%) .height(100%) } .padding({ top: this.topHeight 10 }) .title(完善个人信息) .titleMode(NavigationTitleMode.Mini) .mode(NavigationMode.Stack) .linearGradient({ colors: [[#FFB071, 0], [#f3f4f5, 0.3], [#f3f4f5, 1]] }) } }
