微信小程序更换头像的实现源码
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 }) } }) },
