vue图片上传本地预览组件使用详解

最近项目一直在使用vue，以前只是用vue做过一些简单的demo对数据进行增删改，并没有用于实际开发项目。今天就想了解一下如何用vue实现常见的图片上传前本地预览效果。

效果预览：

 *{margin:0 auto;padding:0;font-family:"微软雅黑";}
 .clearboth::after{
 content:"";
 display:block;
 clear:both;
 }
 .image-view{
 width:400px;
 height:300px;
 margin:50px auto;
 }
 .image-view .addbox{
 float:left;
 position:relative;
 height:100px;
 width:100px;
 margin-bottom:20px;
 text-align:center;
 }
 .image-view .addbox input{
 position:absolute;
 left:0;
 height:100px;
 width:100px;
 opacity:0;
 }
 .image-view .addbox .addbtn{
 float:left;
 height:100px;
 width:100px;
 line-height:100px;
 color:#fff;
 font-size:40px;
 background:#ccc;
 border-radius:10px;
 }
 .image-view .item {
 position:relative;
 float:left;
 height:100px;
 width:100px;
 margin:10px 10px 0 0;
 }
 .image-view .item .cancel-btn{
 position:absolute;
 right:0;
 top:0;
 display:block;
 width:20px;
 height:20px;
 color:#fff;
 line-height:20px;
 text-align:center;
 background:red;
 border-radius:10px;
 cursor:pointer;
 }
 .image-view .item img{
 width:100%;
 height:100%;
 }
 .image-view .view{
 clear:both;
 }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。