uniapp上傳用戶頭像和修改暱稱代碼

因小程序wx.getUserProfile接口被收回，現封裝一份上傳用戶頭像和修改暱稱的代碼

 

 

<template>
  <view class="content">
    <button open-type="chooseAvatar" class="avatar-wrapper" @chooseavatar="uploadAva">
      <div class="cell-box">
        <span class="item-title">頭像：</span>
        <div class="item-centent">
          <image class="avatar" :src="avatarUrl"></image>
        </div>
        <van-icon name="arrow" />
      </div>
    </button>
    <div class="cell-box">
      <span class="item-title">暱稱：</span>
      <div class="item-centent">
        <input type="nickname" class="weui-input" @change="nick_nameChange" :value="params.nickName" placeholder="請輸入暱稱" />
      </div>
      <van-icon name="arrow" />
    </div>
    <button class="save-btn" @click="saveProfile">保 存</button>
  </view>
</template>

<script>
import { baseURL } from "@/http/http";
export default {
  data() {
    return {
      config: baseURL(),
      avatarUrl: 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0',
      nickName: '',
      params: {
        file: '',
        nickName: '',
      },
      reqLoading: false,
    }
  },
  onLoad() {
    if (this.$store.state.isLogin) {
      let _this = this;
      // console.log(this.$store.state.userInfo)
      const userInfo = this.$store.state.userInfo
      this.avatarUrl = userInfo.avatar ? this.config.host + this.config.pub + userInfo.avatar : 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
      this.params.nickName = userInfo.nickName ? userInfo.nickName : ''
      if (userInfo.avatar) {
        wx.getImageInfo({
          src: this.config.host + this.config.pub + userInfo.avatar,
          success(res) {
            _this.params.file = [res.path]
          }
        })
      }
    }
  },
  methods: {
    uploadAva(e) {
      let _this = this;
      wx.getImageInfo({
        src: e.detail.avatarUrl,
        success(res) {
          console.log('getImageInfo', res)
          _this.avatarUrl = res.path;
          _this.params.file = [res.path];
        }
      })
    },
    saveProfile() {
      uni.showLoading({ title: '正在保存...' });
      try {
        let params = this.params;
        this.$api.setProfile(params).then(res => {
          uni.hideLoading();
          if (res.code == 200) {
            uni.showToast({ title: '保存成功' })
            this.$store.dispatch('USERINFO', res.data)
          } else {
            uni.showToast({ title: '保存失敗' });
          }
        }).catch(err => {
          uni.hideLoading();
        })
      } catch (error) {
        uni.showToast({ title: error })
      }
    },
    nick_nameChange(e) {
      this.params.nickName = e.detail.value
    },

  }
}
</script>

<style lang="scss" scoped>
.content {
  display: flex;
  padding-top: 20rpx;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .cell-box {
    width: 100vw;
    min-height: 130rpx;
    display: flex;
    align-items: center;
    padding: 0 32rpx;
    box-sizing: border-box;
    background-color: #fff;
    border-bottom: 1px solid #f8f8f8;
    .item-title {
      font-size: 32rpx;
      color: #333;
      margin-right: 20rpx;
    }
    .item-centent {
      flex: 1;
      display: flex;
      align-items: center;
    }
    .avatar {
      width: 80rpx;
      height: 80rpx;
      border-radius: 18rpx;
    }
  }
  .avatar-wrapper {
    padding: 0;
  }
  .info-right {
    margin-top: 40rpx;
    input {
      font-size: 36rpx;
      color: #333;
      text-align: center;
    }
  }
  .save-btn {
    width: 40%;
    background-color: #3366dd;
    color: #fff;
    // position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 50rpx;
    // bottom: calc(50rpx + env(safe-area-inset-bottom));
  }
}
</style>