<view class="setting-item"> <text class="item-title" @click="preview">头像</text> <view class="item-right" @click="changeImg"> <!-- userinfo.headimgurl是用户登陆的头像也就是未更改时的头像 changeimg是用户更改后的头像 --> <image class="headimgsize" :src="userinfo.headimgurl || changeimg" mode=""></image> <i class="iconfont"></i> </view></view>
data() { return { changeimg: '', // 更改后的头像 }},// 获取vuex的数据computed: mapState({ userinfo: state => state.userinfo}),methods: { changeImg() { uni.chooseImage({ success: (chooseImageRes) => { const tempFilePaths = chooseImageRes.tempFilePaths; this.changeimg = tempFilePaths[0] uni.uploadFile({ url: app.apiUrl+'small/index/indexdata', //仅为示例,非真实的接口地址 filePath: tempFilePaths[0], name: 'headimgurl', formData: { openid: uni.getStorageSync('openid') }, success: (res) => { console.log(JSON.parse(res.data)) var res = JSON.parse(res.data) if (res.status) { app.getUserData() //这里调用用户信息接口更新数据存进vuex uni.showToast({ title:res.msg, icon:'none', duration:2000 }) }else { uni.showToast({ title:res.msg, icon:'none', duration:2000 }) } } }); } }); },}
预览图片:我把点击事件放在“头像”,点击头像可预览图片,实际应用中是不会这么设计的哈
preview(){ uni.previewImage({ urls: [this.userinfo.headimgurl],//拿vuex中的头像地址 longPressActions: { itemList: ['发送给朋友', '保存图片', '收藏'], success: function(data) { console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片'); }, fail: function(err) { console.log(err.errMsg); } } });}