点击修改头像=>
如上图效果
HTML代码:
<div class="avatar">
<span class="avatar_img">
<img :src="info.avatar" alt>
</span>
<div class="changeavatar">
<span class="replace" @click="uploadHeadImg">修改头像</span>
<input
type="file"
accept="image/jpeg, image/jpg, image/png"
@change.stop="handleFile"
class="hiddenInput"
>
</div>
</div>
css:将上传框隐藏
.avatar {
@include wh(200px, 330px);
margin: 0 auto;
text-align: center;
span {
display: block;
}
.avatar_img {
@include wh(130px, 130px);
margin: 60px auto 40px;
img {
border-radius: 50%;
width: 100%;
height: 100%;
}
}
.replace {
display: block;
font-size: 28px;
color: #fff;
padding: 10px 10px;
border: 1px solid #fff;
border-radius: 30px;
}
}
.changeavatar {
position: relative;
.hiddenInput {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: none;
}
}
JS:
// 修改头像
uploadHeadImg() {
// 点击修改头像,获取文档中 class=”hiddenInput” 的元素
this.$el.querySelector(".hiddenInput").click();
},
handleFile(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;
// 修改页面和vuex中的图片路径
this.info.avatar = res.result;
this.$store.state.account.avatar = res.result;
};
reader.readAsDataURL(file);
}
点击头像,选中图片返回后,
调用handleFile函数,let file = $target.files[0],表示取选中的第一张图,
var reader = new FileReader() FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File 或 Blob 对象指定要读取的文件或数据。
onload 事件会在页面或图像加载完成后立即发生。
FileReader对象的readAsDataURL方法可以将读取到的文件编码成Data UR
——————
但是这里只是将图片显示出来,并没有保存起来,如果需要上传或者保存,需要后台接口配合。