【HarmonyOS】鸿蒙头像上传-（编辑个人信息页- 头像上传）+实时数据更新
#效果图
#思路
##步骤：
###一、利用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 = 'jpg'let 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.Get<object>('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.CoreFileKit'
import 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 + '/' + filenamefs.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.Get<object>('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]]
})
}
}