本文主要介绍VUE2.0图片上传功能的实现。原理是通过js控制和input标签的方式完成这一效果，无需加载其他组件。
效果图如下：
1.DOM代码
1.1input标签
由于我们是通过input标签的方式进行图片上传的，但是input标签的样式有点丑，所以我们隐藏该样式display: none
<input @change="fileChange($event)" type="file" id="upload_file" multiple style="display: none"/>1.2添加图片按钮
如果需要用到此方法，只需要在你的上传按钮的地方调用@click=”chooseType”即可，其他部分代码为样式布局仅供参考。
<div class="add" @click="chooseType">
<div class="add-image" align="center">
<i class="icon-camera"></i> //按钮中的图片是一个icon字体图标
<p class="font13">添加图片</p>
</div>
</div>1.3图片预览区域
如果需要用到此方法，只需要在你的预览区域进行v-for循环输出上传的图片集合即可。
<div class="add-img" v-show="imgList.length">
<p class="font14">图片(最多6张，还可上传<span v-text="6-imgList.length"></span>张)</p>
<ul class="img-list">
<li v-for="(url,index) in imgList">
<img class="del" src="../../assets/img/home/btn_clean.png" @click.stop="delImg(index)"/>
//del删除样式，icon字体图标需要自己找哦
<img :src="url.file.src">
</li>
</ul>
</div>1.4图片预览区域-拓展（1.3为简单运用，如果有时间后续会将完整的案例上传）
如果需要用到此方法，只需要在你的预览区域进行v-for循环输出上传的图片集合即可。本案例还运用的Y-DUI的lightbox组件，如有需要请参照图片预览的调用方式。此处，也调用了vue的懒加载和css背景图自适应的方法。
<div class="add-img" v-show="imgList.length">
<p class="font14">图片(最多6张，还可上传<span v-text="6-imgList.length"></span>张)</p>
<ul class="img-list">
<li v-for="(url,index) in imgList">
<img class="del" src="../../assets/img/home/btn_clean.png" @click.stop="delImg(index)"/>
<yd-lightbox>
<div class="app-bg">
<yd-lightbox-img class="app-bg" :original="url.file.src" v-lazy:background-image="{src: url.file.src, error: require('../../assets/img/common/img_placeholder400.png'), loading: require('../../assets/img/common/img_placeholder400.png')}"></yd-lightbox-img>
