鸿蒙-图片上传 超细致步骤

图片上传步骤

图片上传 - 1、使用picker选择一张照片

步骤

1、实例化选择器参数（使用new PhotoSelectOptions（））

2、实例化图片选择器（使用newPhotoViewPicker（））

3、调用图片选择器的select方法传入选择器参数完成图片选取获得结果

在图片上添加点击事件（onclick），使用异步操作（async/await）

.onClick(async () => {
                  // 1. 使用picker选择相册中的图片
                  let urls = await this.selectImage(1)
                  AlertDialog.show({message:JSON.stringify(urls[0])})
           })
           

定义一个函数用于选择照片，具体功能：

1.初始化选择器选项，设置为选择图像

2.设置最大可选择图片的数量maxnum

3.使用选择器选择图片

4.返回选择的图片URI列表

//1.1实例化选择参数
async selectImage(maxnum: number) {
  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、拷贝选择图片到缓存目录

步骤

1.用上下文获取当前应用的缓存目录->getContext().cacheDir

2.利用Data.now（）随机生成图片名字filename，扩展名为jpg

3.利用fs.openSync方法打开图片，准备拷贝到缓存目录->const file =fs.openSync(uri,fs.OpenMode.READ_ONLY)

4.利用fs.copyFileSync(file.fd,fullPath)拷贝文件到缓存目录

在点击事件里利用fs将相册图片拷贝到缓存目录

let fileInfo = await this.copyToCacheDir(urls[0])
AlertDialog.show({ message: JSON.stringify(fileInfo, null, 2) })

定义一个函数用于拷贝到应用缓存中，函数功能如下： 1.打开指定路径的图片文件以只读的模式

2.获取应用缓存目录路径

3.设置文件类型为JPEG（.jpg），并根据当前时间生成新的文件名

4.拼接完整的缓存目录路径

5.将图片文件复制到缓存目录中

6.返回新文件名和文件类型

图片上传 - 3、利用request.uploadFile进行图片上传

步骤

1.准备好参数调用request.uploadFile（）获得上传对象uplosder

2.给uploader对象注册progress事件，监听上传进度 requestRes.on("progress", (uploadedSize: number, totalSize: number)=>{})

3.给uploader对象注册fail事件，监听报错信息requestRes.on('fail', (taskStates) => {}）

在点击事件里面利用request。uploadFile完成图片上传

await this.upload(fileInfo[0], fileInfo[1])

定义函数用于异步上传文件： 1、使用用request.uploadFile方法发起POST请求，将指定文件上传至服务器

2、设置请求头包含认证信息和文件类型

3、监听上传失败事件，记录错误日志

4、监听接收响应头事件，更新用户信息中的图片字段

 async upload(filename: string, type: string) {
   let uploader = 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: []
   })
   uploader.on('fail', (err) => {
     Logger.error('头像上传失败', JSON.stringify(err))
   })
   uploader.on('headerReceive', async(res) => {
   //重新调用接口获取新的数据
let newUserInfo = await HdHttp.Get<object>('hm/userInfo')
     this.currentUser.avatar = newUserInfo.data['avatar']
   })

 }

♥一定要重新定义接口获取新的数据♥

步骤

1、get请求user info重新获取用户数据

2、通过@StorageLink(''user")完成 用户头像字段avatar的修改

let newUserInfo = await HdHttp.Get<object>('hm/userInfo')
     this.currentUser.avatar = newUserInfo.data['avatar']