<script>中
methods: {
// 打开图片上传
uploadHeadImg: function() {
this.$el.querySelector('.hiddenInput').click()
},
// 将头像显示
handleFile: function(e) {
const $target = e.target || e.srcElement
const file = $target.files[0]
var reader = new FileReader()
reader.onload = (data) => {
const res = data.target || data.srcElement
this.userInfo.avatar = res.result
}
reader.readAsDataURL(file)
}
}
</script>
页面中:
<div class="login-main">
<!--更换头像-->
<div class="head_img" @click.stop="uploadHeadImg">
<img :src="userInfo.avatar"/>
</div>
<input type="file" accept="image/*" @change="handleFile" class="hiddenInput"/>
样式:
.head_img{
height: 90px;
justify-content: center;
margin : 0px 0px 15px 80px;
}