小程序上传头像

xml

	<!--pages/more/info/info.wxml-->
<view class="container">
    <view class="info-cont">
        <view class="infoMain">
            <view class="info-items" bindtap="setPhotoInfo">
                <text>头像</text>
                <view class="infotext">
                    <image wx:if="{{imgUrl!=null}}" class="userinfo-avatar" src="{{imgUrl}}" background-size="cover"></image>
                    <image wx:else class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
                    <image class="menu-item-arrow" src="/images/right.png"></image>
                </view>
            </view>
            <view class="info-items" bindtap="setName">
                <text>名字</text>
                <view class="infotext">
                   <text class="info-motto">{{infoname}}</text>
                    <image class="menu-item-arrow" src="/images/right.png"></image>
                </view>
            </view>
            <view class="info-items">
                <text>性别</text>
                <view class="infotext">
                   <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}" class="info-motto">
                        <view class="picker">
                       {{array[index]}}
                        </view>
                    </picker>
                    <image class="menu-item-arrow" src="/images/right.png"></image>
                </view>
            </view>
            <view class="info-items">
                <text>手机号</text>
                <view class="infotext">
                   <text class="info-motto">13812345678</text>
                </view>
            </view>
            <view class="info-items" bindtap="getregion">
                <text>地区</text>
                <view class="infotext">
                   <text class="info-motto">{{address}}</text>
                    <image class="menu-item-arrow" src="/images/right.png"></image>
                </view>
            </view>
        </view>
        <button type="warn"  bindtap="warn" class="buttonExit" > 退出 </button>
    </view>
</view>

wxss

/* pages/more/info/info.wxss */
.info-cont{
    border-top:solid 1px #f0f0f0;
    padding-top: 30rpx;
    display: flex;
    flex-direction: column;
	width: 100%;
}
.infoMain{
    border-bottom:solid 1px #f0f0f0;
    display: flex;
    background-color: #fff;
    flex-direction: column;
    margin-bottom: 30rpx;
}
.info-items{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding:20rpx 40rpx;
    border-top:solid 1px #f0f0f0;

}
.infotext{
    display: flex;
    align-items: center;
}
.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 0 20rpx;
  border-radius: 50%;
}
.info-motto{
     margin: 0 20rpx;
     color:#888;
}
.buttonExit{
    margin:0 40rpx;
}
.menu-item-arrow{
	width: 15rpx;
	height: 20rpx;
}

js

//logs.js
const util = require('../../utils/util.js')
Page({
  data: {
    warnSize:'default',
	imgUrl:null,
	infoname:'姓名',
	address:'China',
	array:['男','女'],
	index:1,
  },
  setPhotoInfo:function(){
	  var that=this;
	  wx.chooseImage({
		  count:1,
		  sizeType:['original','compressed'],
		  sourceType:['album','camera'],
		  success:function(res){
			  var tempFilePaths=res.tempFilePaths
			  that.setData({
				  imgUrl:tempFilePaths
			  })
		  }
	  })
  },

  onLoad: function () {
      var that = this;
     
      //获取用户信息
      wx.getUserInfo({
          success: function (res) {
   
              console.log(res);
              that.data.userInfo = res.userInfo;
   
              that.setData({
                  userInfo: that.data.userInfo
              })
          }
      })

}
})