本文主要介绍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> </div> </yd-lightbox> </li> </ul></div>

2.JS代码块

tips：此处的提示弹窗调用的Y-DUI的提示框，可以改成自己的提示框。

<script> export default { name: "Feedback", data() { return { showFace: false, imgList: [], size: 0, limit:6, //限制图片上传的数量 tempImgs:[] } }, methods: { chooseType() { document.getElementById('upload_file').click(); }, fileChange(el) { if (!el.target.files[0].size) return; this.fileList(el.target); el.target.value = '' }, fileList(fileList) { let files = fileList.files; for (let i = 0; i < files.length; i++) { //判断是否为文件夹 if (files[i].type != '') { this.fileAdd(files[i]); } else { //文件夹处理 this.folders(fileList.items[i]); } } }, //文件夹处理 folders(files) { let _this = this; //判断是否为原生file if (files.kind) { files = files.webkitGetAsEntry(); } files.createReader().readEntries(function (file) { for (let i = 0; i < file.length; i++) { if (file[i].isFile) { _this.foldersAdd(file[i]); } else { _this.folders(file[i]); } } }); }, foldersAdd(entry) { let _this = this; entry.file(function (file) { _this.fileAdd(file) }) }, fileAdd(file) { if (this.limit !== undefined) this.limit--; if (this.limit !== undefined && this.limit < 0) return; //总大小 this.size = this.size + file.size; //判断是否为图片文件 if (file.type.indexOf('image') == -1) { this.$dialog.toast({mes: '请选择图片文件'}); } else { let reader = new FileReader(); let image = new Image(); let _this = this; reader.readAsDataURL(file); reader.onload = function () { file.src = this.result; image.onload = function(){ let width = image.width; let height = image.height; file.width = width; file.height = height; _this.imgList.push({ file }); console.log( _this.imgList); }; image.src= file.src; } } }, delImg(index) { this.size = this.size - this.imgList[index].file.size;//总大小 this.imgList.splice(index, 1); if (this.limit !== undefined) this.limit = 6-this.imgList.length; }, displayImg() { } } }</script>

3.CSS样式代码块，仅供参考

太太懒了，没有一一区分

.app-bg >>>img{ width: 100%; height: 100%; -webkit-transform: scale(1.03); -moz-transform: scale(1.03); -ms-transform: scale(1.03); -o-transform: scale(1.03); transform: scale(1.03); } textarea { padding: 10px; } .text-length { font-size: 14px; z-index: 999; width: 100%; text-align: right; margin-bottom: 10px; color: #e4e4e4; } .warning { color: #fe9900; } .add-img { width: 100%; padding: 10px; } .add-img p { color: #999; } .mui-content { padding-bottom: 60px; } .mui-content .idea { margin-top: 8px; background-color: #FFFFFF; } .good-item { text-align: center; width: 33%; max-width: 100%; overflow: hidden; padding-right: 10px; padding-bottom: 10px; float: left; } .good-item span { font-size: 15px; height: 30px; line-height: 30px; border-radius: 50px; display: block; width: 100%; color: #333; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; border: 1px solid #CCCCCC; } .mui-table { padding-top: 10px; color: #333; padding-left: calc(0.5% + 10px); } .h-line-behind { line-height: 40px; padding-left: 10px; } .question { border: 0; margin-bottom: 10px; } .add { display: inline-block; margin-bottom: 20px; } .add-image { padding-top: 15px; margin-left: 10px; width: 80px; top: 20px; height: 80px; border: 1px dashed rgba(0, 0, 0, .2); } .add-image .icon-camera { font-size: 24px; } .good-item .choose { color: #fff; background-color: #87582E; color: #FFF; border: 0; } .mui-btn-block { border: 0; border-radius: 0; background-color: #87582E; color: #fff; margin-bottom: 0; bottom: 0; } .mui-buttom { position: fixed; width: 100%; bottom: 0; z-index: 999; } .img-list { overflow: hidden; } .img-list > li { float: left; width: 32%; text-align: center; padding-top: 31%; margin-left: 1%; margin-top: 1%; position: relative; } .img-list > li > div { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; } .img-list > li > div .app-bg { width: 100%; height: 100%; } .mui-fullscreen { z-index: 9999; } .del { position: absolute; width: 18px; top: 0; right: 0; z-index: 999 }

总结

以上所述是小编给大家介绍的Vue2.0 移动端图片上传功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！