【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_TYPE

opts.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().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]

}

//点击头像

.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) => {})

这是接口文档