个人技术总结——Uniapp修改头像

[222000207官金宇]

这个作业属于哪个课程	2023软件工程春季
这个作业要求在哪里	软件工程实践总结&个人技术博客
这个作业的目标	个人技术总结
其他参考文献	《构建之法》

@

目录

• 一、技术概述
• 二、技术详述
• 三、问题与解决
• 四、总结
• 五、参考文献

一、技术概述

• 目前大部分的app都有修改个人信息功能，其中必然就会有修改头像。点击修改头像，下方跳出选择：拍摄或从相册选择，选择拍摄，将打开手机的相机功能，拍摄完成，点击确定，修改成功；而选择从相册中选择，跳转至手机相册，选择图片，点击确定，修改成功

二、技术详述

• 首先在view中设置好用于装载头像的头像框，其中最外层view设置点击事件avatarChoose，中间的view中用avatar接受图片url

  <view class="avatar" @tap="avatarChoose">
    <view class="imgAvatar">
        <view class="iavatar" :style="'background: url('+avatar+') no-repeat center/cover #eeeeee;'"></view>
    </view>
    <text>修改头像</text>
  </view>
  

• 然后在JavaScript中编写方法avatarChoose，其中type的属性值为image表示选择图片

  avatarChoose() {
    let that = this;
    uniCloud.chooseAndUploadFile({
    type: 'image',
    success(res) {
            that.avatar = res["tempFiles"][0]["url"];
    },
    fail() {},
    complete() {}
    });
  }
  

• 因为使用的是UniCloud中的chooseAndUploadFile方法，所以记得关联云数据库
  

  

  
  

  

• 效果展示
  

三、问题与解决

• 遇到的问题 ：在最开的时候我使用的是uni.chooseImage方法，这个方法也能实现头像的修改，但是它的返回图片格式与我们云数据库中的图片存储格式并不相同
• 解决方案 ：在查阅了UniCloud官方文档后，发现可以使用uniCloud.chooseAndUploadFile方法，因为我们使用的就是UniCloud云数据库，所以图片的格式一致

四、总结

• 其实修改头像的实现方式有非常的多，但很多方法都是将图片转为base64的格式储存，与我们的存储方式并不相同，在一开始的时候我的思路还在于图片格式的转换，浪费了大量的时间，却没有发现有更加直接适合的方法能用，所以，有时候一条路走不通，要试着换一条路走

五、参考文献

Uniapp-UniCloud官方文档