微信小程序更換頭像代碼

WXML：

<view class="topImg">
    <view class="topImg-item">
      <view class="t-i-left">
        頭像
      </view>
      <view class="t-i-right">
        <view class="image"
              bind:tap="imageClick">
          <image src="{{imgUrl}}{{image}}" />
        </view>
      </view> 
    </view>
  </view>

WXSS:

.topImg{
  width: 100%;
  height: 200rpx;
  display: flex;
  justify-content: center;
}
.topImg-item{
  width: 700rpx;
  height: 200rpx;
  display: flex 
}

.t-i-left{
  width: 50%;
  height: 100%;
  display: flex;
  align-items: center;
  font-size: 30rpx;
}
.t-i-right{
  width: 50%;
  height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center
}
.t-i-right .image{
  width: 135rpx;
  height: 135rpx;
  background: #FFFFFF;
  border: 2rpx solid #E5E5E5;
  border-radius: 50%;
}
.t-i-right .image image{
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

JS:（重點）

imageClick(){
    var that = this;
    wx.chooseImage({  //從本地相冊選擇圖片或使用相機拍照
      count: 1, // 默認9
      sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，默認二者都有
      sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機，默認二者都有

      success: function (res) {

        // 返回選定照片的本地文件路徑列表，tempFilePath可以作為img標簽的src屬性顯示圖片
        var tempFilePaths = res.tempFilePaths
        var uid = that.data.uid
        wx.uploadFile({
          url: 'https://www.qqbee.net/api/index/uploadimg',
          filePath: tempFilePaths[0],
          name: 'file',
          formData: {
            uid
          },
          success: function (res) {
            const data = res.data
            const obj = JSON.parse(data); 
            const image = obj.image
            that.setData({
              image 
            })
          }
        })
      }
    })
  }