vue头像更换

<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;

}