【HarmonyOS】鸿蒙头像上传-（编辑个人信息页- 头像上传）+实时数据更新

#效果图

#思路

##步骤：
###一、利用picker api选择1张图片
  1. 实例化选择器参数(使用new PhotoSelectOptions())
  2. 实例化图片选择器 (使用newPhotoViewPicker() )
  3. 调用图片选择器的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 进行图片上传
  1. 准备好参数调用request.uploadFile()获得上传对象 uploader
  2.  'Content-Type': 'multipart/form-data'
  3. 给uploader对象注册progress事件，监听上传进度 requestRes.on("progress", (uploadedSize: number, totalSize: number)=>{})
  4. 给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 + '/' + 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.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]]
    })
  }
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/424732.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

监控系列之-prometheus部署说明

监控系列之-prometheus部署说明

一、Prometheus介绍 Prometheus是一款开源的监控系统&#xff0c;主要用于收集、存储和查询时间序列数据&#xff0c;以便于对系统进行监控和分析Prometheus的架构由四个主要组件组成&#xff1a; 1、Prometheus Server &#xff1a;Prometheus Server是Prometheus的核心组件&a…
阅读更多...
C到C++入门基础知识

C到C++入门基础知识

一&#xff1a;命名空间&#xff1a;namespace &#xff08;一&#xff09;&#xff1a;命名空间的定义 注&#xff1a;命名空间只能定义在全局&#xff0c;不能定义在函数内部。 &#xff08;1&#xff09;类似于C语言的结构体&#xff0c;C语言的命名空间定义为&#xff1…
阅读更多...
OpenCV和Tesseract OCR识别复杂验证码喽~~

OpenCV和Tesseract OCR识别复杂验证码喽~~

目录 代码实现思路 流程&#xff1a; 主要流程&#xff1a; 整体代码 效果展示 原图 处理之后的图 总结 流程图 代码实现思路 使用 OpenCV 进行图像预处理&#xff0c;并通过 Tesseract OCR 来识别验证码中的字符。以下是其实现思路的详细讲解&#xff1a; 流程&…
阅读更多...
代码随想录Day 44|leetcode题目：1143.最长公共子序列、1035.不相交的线、53. 最大子序和、392.判断子序列

代码随想录Day 44|leetcode题目：1143.最长公共子序列、1035.不相交的线、53. 最大子序和、392.判断子序列

提示&#xff1a;DDU&#xff0c;供自己复习使用。欢迎大家前来讨论~ 文章目录 题目题目一&#xff1a;1143.最长公共子序列解题思路&#xff1a; 题目二&#xff1a; 1035.不相交的线解题思路&#xff1a; 题目三&#xff1a;53. 最大子序和解题思路 题目四&#xff1a;392.判…
阅读更多...
【Android 13源码分析】WindowContainer窗口层级-3-实例分析

【Android 13源码分析】WindowContainer窗口层级-3-实例分析

在安卓源码的设计中&#xff0c;将将屏幕分为了37层&#xff0c;不同的窗口将在不同的层级中显示。 对这一块的概念以及相关源码做了详细分析&#xff0c;整理出以下几篇。 【Android 13源码分析】WindowContainer窗口层级-1-初识窗口层级树 【Android 13源码分析】WindowCon…
阅读更多...
优化 TCP 以提高网络性能

优化 TCP 以提高网络性能

本页面简要介绍了计算正确设置的方法&#xff0c;以缩短 Google Cloud 和混合场景中 TCP 连接的延迟时间。本页面还可帮助您了解如何缩短 Google Cloud 中流程之间的连接延迟时间。 现代微服务架构主张&#xff0c;开发者应该构建处理单一任务的小型服务。服务应根据系统的可靠…
阅读更多...
【iOS】dismiss多级的方法

【iOS】dismiss多级的方法

前言 上次笔者总结过push和pop推入和推出界面的方法&#xff0c;这里对于dismiss多级的方法进行一个总结&#xff0c;推入推出方法可以看看笔者这篇博客&#xff1a;【iOS】UI学习——界面切换 dismiss推出多级的原理 当我们使用pop推入新的界面的时候&#xff0c;连续pop推…
阅读更多...
在线查看 Android 系统源代码 AOSPXRef and AndroidXRef

在线查看 Android 系统源代码 AOSPXRef and AndroidXRef

在线查看 Android 系统源代码 AOSPXRef and AndroidXRef 1. AOSPXRef1.1. http://aospxref.com/android-14.0.0_r2/1.2. build/envsetup.sh 2. AndroidXRef2.1. http://androidxref.com/9.0.0_r3/2.2. build/envsetup.sh 3. HELLO AndroidReferences 1. AOSPXRef http://aospx…
阅读更多...
YOLOv5/v8 + 双目相机测距

YOLOv5/v8 + 双目相机测距

yolov5/v8双目相机测距的代码&#xff0c;需要相机标定 可以训练自己的模型并检测测距&#xff0c;都是python代码 已多次实验&#xff0c;代码无报错。 非常适合做类似的双目课题&#xff01; 相机用的是汇博视捷的双目相机&#xff0c;具体型号见下图。 用的yolov5是6.1版本的…
阅读更多...
QT --- 初识QT

QT --- 初识QT

一、通过代码构建helloworld界面 一般通过代码来构造界面的时候&#xff0c;通常会把构造界面的代码放到Widget/MainWindow的构造函数中。 Qt中每个类都有对应同名的头文件 上古时期&#xff0c;Qt用的是这种风格的文件。1998年之后&#xff0c;C标准成立了&#xff0c;C98标准…
阅读更多...
jenkins入门

jenkins入门

CI 、CD入门 一：jenkins实现CI操作 1.在jenkins环境安装jdk 、maven ，同事修改maven里的settings.xml中的两个配置：添加jdk插件版本并开启和私服镜像（也可以在jenkins页面的全局配置选择自动安装，但是自动安装速度很慢，所以这里选择手动安装，后面直接在全局配置指定目…
阅读更多...
太阳下山还有月光，月亮睡了还有朝阳

太阳下山还有月光，月亮睡了还有朝阳

最近听到一首歌《GooGoo-不要慌太阳下山有月光》&#xff0c;觉得里面的歌词很有意思&#xff0c;这也是标题的由来。截取歌词片段&#xff1a; 不要迷茫 不要慌张 太阳下山 还有月光 它会把人生路照亮 陪你到想去的地方 不要彷徨 不要沮丧 月亮睡了 还有朝阳 抬头看天一定会亮…
阅读更多...
如何正确使用MMPI量表进行测试？

如何正确使用MMPI量表进行测试？

1、需要初中以上学历&#xff0c;能对测试题准确的理解。 2、应在安静、无干扰的环境中进行&#xff0c;确保自己能够集中注意力完成测试。 3、尽量不要选择“无法回答”这个选项&#xff0c;当然如果确实有无法回答的&#xff0c;也可以选&#xff0c;但是总数不要超过22个。…
阅读更多...
Python计算机视觉 第9章-图像分割

Python计算机视觉 第9章-图像分割

Python计算机视觉 第9章-图像分割 图像分割是将一幅图像分割成有意义区域的过程。区域可以是图像的前景与背景或图像中一些单独的对象。这些区域可以利用一些诸如颜色、边界或近邻相似性等特征进行构建。 9.1　图割&#xff08;Graph Cut&#xff09; 图割&#xff08;Graph…
阅读更多...
一步一步自制py脚本并且并且修改为exe可执行文件教学外附带SHA-1解密exe文件资源

一步一步自制py脚本并且并且修改为exe可执行文件教学外附带SHA-1解密exe文件资源

第一步&#xff1a;安装 Python 下载 Python&#xff1a;访问 Python 官网 下载并安装最新版本的 Python。安装时选择添加到环境变量 PATH&#xff1a;在安装过程中&#xff0c;确保勾选“Add Python to PATH”选项。 第二步&#xff1a;编写 Python 脚本 创建一个新的 Pyth…
阅读更多...
基于BiGRU+Attention实现风力涡轮机发电量多变量时序预测(PyTorch版)

基于BiGRU+Attention实现风力涡轮机发电量多变量时序预测(PyTorch版)

前言 系列专栏:【深度学习&#xff1a;算法项目实战】✨︎ 涉及医疗健康、财经金融、商业零售、食品饮料、运动健身、交通运输、环境科学、社交媒体以及文本和图像处理等诸多领域&#xff0c;讨论了各种复杂的深度神经网络思想&#xff0c;如卷积神经网络、循环神经网络、生成对…
阅读更多...
参赛心得和思路分享：2021第二届云原生编程挑战赛2： 实现一个柔性集群调度机制

参赛心得和思路分享：2021第二届云原生编程挑战赛2： 实现一个柔性集群调度机制

关联比赛: 2021第二届云原生编程挑战赛2&#xff1a;实现一个柔性集群调度机制 参赛心得 历时快两个月的第二届云原生编程挑战赛结束了&#xff0c;作为第一次参赛的萌新&#xff0c;拿下了28名的成绩&#xff0c;与第一名差了19万分&#xff0c;因为赛制时间太长&#xff0c…
阅读更多...
基于python+django+vue的社区爱心养老管理系统

基于python+django+vue的社区爱心养老管理系统

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、SSM项目源码 系统展示 【2025最新】基于pythondjangovueMySQL的社…
阅读更多...
103.WEB渗透测试-信息收集-FOFA语法（3）

103.WEB渗透测试-信息收集-FOFA语法（3）

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 内容参考于&#xff1a; 易锦网校会员专享课 上一个内容&#xff1a;102.WEB渗透测试-信息收集-FOFA语法&#xff08;2&#xff09; FOFA使用实例 组件框架 …
阅读更多...
eureka.client.service-url.defaultZone的坑

eureka.client.service-url.defaultZone的坑

错误的配置 eureka: client: service-url: default-zone: http://192.168.100.10:8080/eureka正确的配置 eureka: client: service-url: defaultZone: http://192.168.100.10:8080/eureka根据错误日志堆栈打断电调试 出现两个key&#xff0c;也就是defaultZone不支持snake-c…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023