效果图如下所示(视频再转格式的时候被挤变形了一点，各位童鞋将就一下，嘻嘻)：

关键代码（html）：

 <span class="headerSpan"><img class="headerImg" :src="headerUrl"><input @change="getImgUrl($event)" ref="file" title='' type="file" accept="image/*" class="hiddenInput"/></span>

关键代码（css）:

//鼠标悬浮时的灰膜样式设置
.headerSpan {position: relative;z-index: 1;display: inline-block;}.headerSpan:after {content: "";background:rgba(0,0,0,0.4);z-index:2;-webkit-transition: 0.2s;-moz-transition: 0.2s;-ms-transition: 0.2s;-o-transition: 0.2s;transition: 0.2s;position: absolute;border-radius: 45px;top: 0px;right: -0.8px;width: 4.4rem;height: 4.4rem;opacity: 0;filter: alpha(opacity=0);}.headerSpan:hover:after {opacity: 100;filter: alpha(opacity=0);cursor: pointer;}// 更换头像字的样式设置.headerSpan:before {content: "更换头像";display: inline-block;float: right;position: absolute;z-index: 5;top: 24px;right: 0.5rem;width: 3.5rem;height: 1.5rem;opacity: 0;color: white;filter: alpha(opacity=0);}.headerSpan:hover:before {opacity: 100;filter: alpha(opacity=0);cursor: pointer;}.hiddenInput {position: absolute;top: 0px;left: 0px;width: 70px;height: 70px;z-index: 6;opacity: 0;cursor: pointer;border-radius: 45px;}

关键js

 getImgUrl: function (e) {this.logoUrl = e.target.files[0]console.log(this.logoUrl)}