代码
template
<div class="form-group">
<p><label for="avatar">
<img :src="imageUrl" alt="" id="img" ref="img" style="width: 100%;">
</label></p>
<input type="file" name="avatar" id="avatar" style="display: none" @change="changeimg">
</div>
script
<script>
export default {
data() {
return {
// 图片路径
imageUrl: 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
}
},
methods: {
// 更新头像
changeimg(e) {
// 1.产生一个文件阅读器对象
const myFileReader = new FileReader();
// 2.获取用户上传的头像文件
// let avatarObj = document.getElementById('avatar').files[0];
const avatarObj = e.target.files[0]
// 3.将文件对象交给阅读器加载
myFileReader.readAsDataURL(avatarObj) // IO操作 需要消耗时间 但是是异步
// 4.修改img标签的src属性
// 等待文件阅读器对象加载完毕之后再修改src属性
myFileReader.onload = (e) => {
this.imageUrl = e.target.result
}
},
}
}
</script>
style
/*头像*/
.form-group {
width: 100px;
height: 100px;
border-radius: 50%;
overflow: hidden;
}