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

news2025/2/25 5:07:11

#效果图

#思路

##步骤：
###一、利用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_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 进行图片上传
  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.coloradmin.cn/o/2131256.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

（一） 遥感中的大气窗口和 OBIA

（一） 遥感中的大气窗口和 OBIA

摘要: 什么是地球的大气窗口？ 不知您是否想过，光是如何穿过大气层到达地球的呢？这是源于大气中的臭氧、水、二氧化碳和其他分子，我们可以免受有害辐射的伤害。因此，我们只能看到电磁波谱的特定部分，这种现象被称为地球的“大气窗口”。 在遥感领域，传感器被建造来拾取那…
阅读更多...
无人机巡检：突破传统局限，引领智能监测新时代

无人机巡检：突破传统局限，引领智能监测新时代

无人机行业正在经历快速发展&#xff0c;技术不断创新&#xff0c;应用领域不断拓展。从最初的航拍娱乐到如今的工业巡检、农业植保、物流配送、灾害救援等&#xff0c;无人机正展现出巨大的实用价值。如今&#xff0c;行业级无人机应用不断扩展&#xff0c;在测绘与泛测绘领域…
阅读更多...
中控室控制台处在自动状态什么意思

中控室控制台处在自动状态什么意思

在现代工业和智能控制系统中&#xff0c;中控室控制台作为集中控制和管理各种设备、系统和流程的核心&#xff0c;扮演着至关重要的角色。当提到中控室控制台处在自动状态时&#xff0c;这通常意味着控制台已经切换到一种高度智能化的工作模式&#xff0c;能够自动调整和管理各…
阅读更多...
【Linux】数据链路层

【Linux】数据链路层

一、数据链路层引入 1.1 数据链路层的功能 在网络层中&#xff0c;我们使用IP协议进行通信&#xff0c;需要进行跨网络转发到目标主机&#xff0c;本质上就是一个报文经历了无数个子网&#xff0c;而数据链路层就是解决在一个子网中如何传输报文的问题。 数据链路层的功能是&a…
阅读更多...
通义灵码用户说：“人工编写测试用例需要数十分钟，通义灵码以毫秒级的速度生成测试代码，且准确率和覆盖率都令人满意”

通义灵码用户说：“人工编写测试用例需要数十分钟，通义灵码以毫秒级的速度生成测试代码，且准确率和覆盖率都令人满意”

通过一篇文章&#xff0c;详细跟大家分享一下我在使用通义灵码过程中的感受。 一、定义 通义灵码&#xff0c;是一个智能编码助手&#xff0c;它基于通义大模型&#xff0c;提供代码智能生成、研发智能问答能力。 在体验过程中有任何问题均可点击下面的连接前往了解和学习。 …
阅读更多...
网络安全实训八(y0usef靶机渗透实例)

网络安全实训八(y0usef靶机渗透实例)

1 信息收集 1.1 扫描靶机IP 1.2 收集靶机的端口开放情况 1.3 探测靶机网站的目录 1.4 发现可疑网站 1.5 打开可疑网站 2 渗透 2.1 使用BP获取请求 2.2 使用工具403bypasser.py探测可疑网页 2.3 显示可以添加头信息X-Forwarded-For:localhost来访问 2.4 添加之后转发&#xff…
阅读更多...
芯片设计项目管理：国内某知名芯片半导体企业引进 PowerProject，构建国产化项目管理平台

芯片设计项目管理：国内某知名芯片半导体企业引进 PowerProject，构建国产化项目管理平台

国内芯片设计行业发展快速&#xff0c;随着其行业技术能力的不断扩大&#xff0c;芯片设计涵盖的领域和内容愈加丰富&#xff0c;因此&#xff0c;对专业化的项目管理理念与思路提出了更高的要求。 近日&#xff0c;国内某知名芯片设计企业选择北京奥博思软件技术有限公司&…
阅读更多...
jantic/DeOldify部署（图片上色）附带Dockerfile和镜像

jantic/DeOldify部署（图片上色）附带Dockerfile和镜像

1. 克隆代码到DeOldify git clone https://github.com/jantic/DeOldify.git DeOldifyDeOldify源码 2. 安装依赖 这里会安装python以及创建deoldify环境 cd DeOldify conda env create -f environment.yml(base) rootDESKTOP-1FOD6A8:~/DeOldify# conda env create -f environm…
阅读更多...
Java开发安全及防护

Java开发安全及防护

目录 一、开发安全 二、XSS介绍及防范措施 2.1何为XSS 2.2XSS分类 2.3常用方法 三、SQL注入介绍及防范措施 3.1何为SQL注入 3.2常用方法 四、重放介绍及防范措施 4.1何为重放 4.2常用方法 一、开发安全 在学习安全之前&#xff0c;我们首先学习漏洞&#xff0c;知道漏…
阅读更多...
JavaScript控制语句和函数的使用

JavaScript控制语句和函数的使用

文章目录 前言一、控制语句 1.if条件语句2.switch多分支语句3.for循环语句4.while循环语句5.do...while循环语句6.break 与 continue 关键字二、函数 1.函数的定义2.函数的调用总结 前言 JavaScript 的控制语句和函数的使用&#xff0c;基本上同理于 Java。该篇文章主要展示如何…
阅读更多...
力扣之1783.大满贯数量

力扣之1783.大满贯数量

文章目录 1. 1783.大满贯数量1.1 题干1.2 建表1.3 题解1.4 结果截图 1. 1783.大满贯数量 1.1 题干 表&#xff1a;Players ----------------------- | Column Name | Type | ----------------------- | player_id | int | | player_name | varchar | ----------------------…
阅读更多...
深度学习实战89-基于改造后的长短期记忆网络LSTM 的猪肉价格预测模型研究

深度学习实战89-基于改造后的长短期记忆网络LSTM 的猪肉价格预测模型研究

大家好，我是微学AI，今天给大家介绍一下深度学习实战89-基于改造后的长短期记忆网络LSTM 的猪肉价格预测模型研究。本文围绕基于改造后的长短期记忆网络 LSTM 的猪肉价格预测模型展开研究。首先介绍项目背景，阐述进行猪肉价格预测的重要性。接着详细讲解改造后的 LSTM 模型原…
阅读更多...
LibSVM介绍及使用

LibSVM介绍及使用

介绍 LibSVM 是一个广泛使用的开源库&#xff0c;用于支持向量机&#xff08;SVM&#xff09;的实现。它由台湾大学的 Chih-Chung Chang 和 Chih-Jen Lin 开发。LibSVM 提供了一种简单易用的接口&#xff0c;支持多种 SVM 变体&#xff0c;包括分类、回归和分布估计。以下是一些…
阅读更多...
【数据库】MySQL-基础篇-事务

【数据库】MySQL-基础篇-事务

专栏文章索引&#xff1a;数据库 有问题可私聊&#xff1a;QQ&#xff1a;3375119339 目录 一、事务简介 二、事务操作 1.未控制事务 1.1 测试正常情况 1.2 测试异常情况 2.控制事务一 1.1 查看/设置事务提交方式 1.2 提交事务 1.3 回滚事务 3.控制事务二 1.1 开启事…
阅读更多...
C++ namespace（域）

C++ namespace（域）

个人主页&#xff1a;Jason_from_China-CSDN博客 所属栏目&#xff1a;C系统性学习_Jason_from_China的博客-CSDN博客 namespace的价值 避免命名冲突&#xff1a;在大型项目或使用多个库的情况下&#xff0c;不同部分可能会定义相同名称的实体&#xff08;如变量、函数、类等&a…
阅读更多...
fpga系列 HDL:简化的FIFO实现

fpga系列 HDL:简化的FIFO实现

CODE 下面是一个简化的FIFO实现示例&#xff0c;基于Verilog HDL&#xff1a; module fifo (input wire clk, // 时钟信号input wire reset, // 异步复位信号input wire wr_en, // 写使能信号input wire rd_en, // 读使能…
阅读更多...
CSS中的位置定位总结

CSS中的位置定位总结

文章目录 静态定位相对定位绝对定位固定定位 静态定位 静态定位(position:static)/默认的文档流布局 块级元素按照书写顺序从上往下依次排列行内/行内块元素按照书写顺序从左到右依次排列&#xff0c;一行放不下才换行文档流中的元素都是紧密排布的&#xff0c;没有大的空隙&…
阅读更多...
【机器学习】9 ——最大熵模型的直观理解

【机器学习】9 ——最大熵模型的直观理解

系列文章目录 提示&#xff1a;写完文章后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 系列文章目录前奏例子硬币垃圾邮件代码 前奏 【机器学习】6 ——最大熵模型 例子 硬币 假设我们有一枚硬币&#xff0c;可能是公平的&#xff0c;…
阅读更多...
哪些软件可以监控电脑屏幕？四款优秀的屏幕电脑监控软件

哪些软件可以监控电脑屏幕？四款优秀的屏幕电脑监控软件

你是否曾好奇&#xff0c;员工们在电脑前的忙碌究竟是在提高公司业绩&#xff0c;还是在成为“网上冲浪”高手&#xff1f; 或者&#xff0c;作为家长&#xff0c;你是否想知道孩子们的学习状态是如火如荼&#xff0c;还是在和游戏“斗智斗勇”&#xff1f;不管是办公还是家庭…
阅读更多...
图纸加密软件哪个最好用？2024年好用的6款图纸加密软件分享！好用不踩雷！

图纸加密软件哪个最好用？2024年好用的6款图纸加密软件分享！好用不踩雷！

某知名设计公司的年度发布会上&#xff0c;管理层突然被一个坏消息打断——公司的一份核心图纸被泄露到互联网上&#xff0c;导致重要的合作项目搁浅&#xff0c;直接损失数百万。 这样的事件不是个例&#xff0c;为此&#xff0c;很多企业意识打破图纸加密对保护企业知识产权和…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023