这本是实训的一个要求,但是觉得可以写出来作为一个模板使用
首先是Vue代码:大概的意思就是,双击图片(用户需要修改图片),跳出选择项,form.avatar代表用户头像的url
<div class="imgInfo" @dblclick="changeImg">
<img class="img" :src="form.avatar" alt="">
<div>
<input @change="fileChange($event)" type="file" id="upload_file" style="display: none;" accept="image/*"/>
</div>
</div>
然后就是Vue处理函数:因为默认input的框是隐藏的,用户通过双击出发修改事件,所以需要在changeImg里面手动触发@change事件,然后就是接受用户选择的图片,如果上传成功就通过FileReader();解析图片的base64编码,将头像进行替换,其实还可以在替换成功之后,后台会返给一个url,用这个url进行填充就好。
//更改头像操作
changeImg () {
document.getElementById('upload_file').click();
},
fileChange (el