实现思路 【vue中实现图片预览功能】结合表单元素的file类型，再使用定位将img标签展示图片覆盖到表单上面，将表单透明度设置为0并设置定位，定位层级比img更高。
再通过chang事件监听文件是否发生改变，并使用URL.createObjectURL将图片转换为临时路径,并赋值给展示图片
代码
{{uploadTitle}}
文章图片
//图片预览功能
changepic(e) {
let file = e.target.files[0];
let url = URL.createObjectURL(file);
this.imgSrc = https://www.it610.com/article/url;
}
.upload-pic {
margin-top: $titleMarginTop;
.upload-title {
font-size: $titleFontSize;
font-weight: bold;
}
.upload-box {
position: relative;
@include uploadPic;
margin-top: 14px;
.file-path {
position: absolute;
@include uploadPic;
outline: none;
opacity: 0;
z-index: 10;
}
.show-img {
position: absolute;
@include uploadPic;
left: 0;
vertical-align: middle;
border-radius: $radiusSize * 2;
}
}
}
@mixin uploadPic {
width: 80px;
height: 80px;
}
