微信小程序更换头像的实现源码

微信小程序更换头像的实现源码

html

  <view class='top_head_border'>   
 <image class='top_head' src='{{head}}'></image>  
 <view class='top_text'  mode="aspecFill" bindtap="headimage">点击更换头像</view>
 </view>

css

.top_head {
  margin-top: 30rpx;
  width: 160rpx; 
  height: 160rpx; 
  border-radius: 100%; 
  border: 1px solid rgba(51, 51, 51, 1);
       }
.top_text { 
 line-height: 40rpx;  
 color: rgba(229, 28, 35, 1);  
 font-size: 28rpx;  
 font-family: Roboto;
 }

  data: {  
     // 切换头像  
    showModal: false,   
     head: "/img/1.png",   
     },
       // 点击换手机相册或者电脑本地图片    
       headimage: function() {   
          var _this = this;  
           wx.chooseImage({    
               count: 1, // 默认9      
                sizeType: ['original', 'compressed'],       
                  // 指定是原图还是压缩图，默认两个都有      
                   sourceType: ['album', 'camera'],      
                  // 指定来源是相册还是相机，默认两个都有    
                   success: function(res) {       
                   // 返回选定照片的本地文件路径tempFilePath可以作为img标签的src属性显示图片 
                   //然后请求接口把图片传给后端存到服务器即可       
                     _this.setData({    
                       head: res.tempFilePaths      
                                          }) 
                                }    
                   }) 
      },