<!-- 上传头像 -->
<div>
//头像
<img :src="userInfo.avatar" alt>
</div>
点击上传头像按钮
<p class="upload" @click.stop="uploadHeadImg">上传头像</p>
隐藏选择文件夹
<input v-show="false" type="file" accept="image/*" @change="handleFile" class="hiddenInput">
userInfo: {
avatar: 默认图片地址 随便啥()
}
methods: {
uploadHeadImg: function() {
this.$el.querySelector(".hiddenInput").click();
},
// 将头像显示
handleFile: function(e) {
let $target = e.target || e.srcElement;
let file = $target.files[0];
var reader = new FileReader();
reader.onload = data => {
let res = data.target || data.srcElement;
this.userInfo.avatar = res.result;
};
reader.readAsDataURL(file);
}
}