如上图所示，需要完成的功能是点击更改头像图片，获取本地文件库，选择图片后替换原图片。在这里，我将简单地通过在html文件中引入vue来实现这个功能，代码如下：

HTML:

Div id=' app ' Div class=' item _ bockhead _ p ' Div class=' head _ img ' img 3360 src=' http : user info . avatar '/-图片地址的动态绑定-/Div class=' setting _ right ' @ click。stop=' uploadheadimg ' div class=' caption ' change avatar/div/div输入类型=' file ' accept=' image/* @ change=' handlefile ' class=' hidden input '/div/div注意：

1.accept属性用于限制图像的格式，例如：(accept=“image/gif，image/JPEG”)，accept=“image/*”表示格式不受限制。2.真正打开本地文件的是输入，但它隐藏在这里。

JS:

var app=new Vue({ el: '#app '，data : { userninfo : { avatar : ' https://GSS 0 . bdstatic.com/-403 sag _ xi4khgkpowk1hf 6 hy/baike/c0=baike 92，5，5，92，30/sign=62d 46 c 39067 b 020818 c 437 b 303 b 099 b 6/d 4628535 e 55$ el.queryselector('。hiddeninput ')。单击()}，//将头像显示为handlefile:函数(e){ let $ target=e . target | | e . srcelement let file=$ target . files[0]varreader=new file reader(). reader . onload=(data)={ let RES=data . target | | data . srcelementhis . user info . avatar=RES . result } reader . readasdataurl(file)}，})注意：

1.这个。$ el.queryselector('。hiddenInput’)是获得的文档中class=“hiddenInput”的元素。2.打开文件夹并选择确认图片后，执行handleFile功能。3.让$ target=e.target | | e.srcElement表示调用他的各种属性。两者的区别在于ie下支持e.srcelement，ff支持e.target。4.由于手机上可以选择多张图片，所以让file=$target.files[0]表示拍摄第一张图片。5.VarReader=NewFileReader()FileReader对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容，并使用文件或Blob对象来指定要读取的文件或数据。6.onload事件将在页面或图像加载后立即发生。7的readAsDataURL方法。文件阅读器对象可以将读取的文件编码成数据网址。css:item _ bock { display: flexalign-items:居中；justice-content :空格；height:94px宽度： 300 px；padding:0px 24px 0px 38pxborder-bottom: 1px实心# f7f 7；背景# fff}.head _ p { height:132px}.head _ img { height: 90px}.head _ img img { width:90px高度：90 px；border-radius:50px}。setting _ right { display : flex；height: 37pxjustice-content :灵活端；align-items:居中；}.hiddenInput { display: none}.标题{ color: # 8F8F8Ffont-size : 26px；height: 37px}这里只显示图片，不保存。如果需要上传或者保存，需要后台界面的配合。

以上就是边肖介绍的vue的头像变化功能的详细讲解和整合，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！