Vue中上传图片并且通过swiper轮播展示出来 Vue中上传图片并且通过swiper轮

【Vue中上传图片并且通过swiper轮播展示出来】前端小白前来报道，很久没有更新博客了，都不知道被别人关注是什么感觉，突然感觉前端技术太多了，有点要学秃的节奏了呀，下面这个案例是我纠结了好久才找到解决方法，特此给大家提供帮助：

vue.js文件批量上传 - 锐客网 > .upload_warp_img_div_top { position: absolute; top: -10px; right: -10px; width: 20px; height: 20px; line-height: 30px; /* border: 1px solid red; */ border-radius: 50%; background-color: #fff; } .upload_warp_img_div img { width: 100%; height: 100%; } .upload_warp_img_div { position: relative; height: 100px; width: 100px !important; border: 1px solid #2196F3; margin: 10px 0px 0px 0px; float: left; line-height: 100px; display: table-cell; text-align: center; background-color: #eee; cursor: pointer; } .upload_warp_img_div:first-child{ margin-left: 10px; } .upload_warp_img_div:last-child{ margin-right: 22px; } .upload_warp_img { width: 48%; height: 120px; padding: 0px; float: left; /* border: 1px solid red; */ } .upload_warp_img>img{ width: 100%; height: 100%; float: left; } .upload_warp_left img { width: 20%; margin-top: 40px; } .upload_warp_left { float: left; width: 100px; height: 100px; border: 2px dashed #2196F3; border-radius: 4px; cursor: pointer; margin-right: 30px; margin-top: 10px; }.upload_warp { margin: 14px; height: 130px; }.upload { border: 1px solid #2196F3; background-color: #fff; width: 800px; border-radius: 4px; }.hello { width: 800px; margin-left: 27%; text-align: center; } 文章图片文章图片文章图片 ="https://www.jq22.com/jquery/vue.min.js"> ="./swiper-4.5.3/dist/js/swiper.min.js"> > var app = new Vue({ el: '#app', data () { return { imgList: [], size: 0 } }, methods: { fileClick(){ document.getElementById('upload_file').click() }, fileChange(el){ if (!el.target.files[0].size) return; this.fileList(el.target.files); el.target.valuehttps://www.it610.com/article/= '' }, fileList(files){ for (let i = 0; i < files.length; i++) { this.fileAdd(files[i]); } }, fileAdd(file){ this.size = this.size + file.size; //总大小 let reader = new FileReader(); reader.vue = this; reader.readAsDataURL(file); reader.onload = function () { file.src = https://www.it610.com/article/this.result; this.vue.imgList.push({ file }); } }, fileDel(index){ this.size = this.size - this.imgList[index].file.size; //总大小 this.imgList.splice(index, 1); }, initswiper () { // 轮播图效果 var mySwiper = new Swiper ('.swiper-container', { // loop: true, // 循环模式选项 observer:true, //修改swiper自己或子元素时，自动初始化swiper observeParents:true,//修改swiper的父元素时，自动初始化swiper // 如果需要前进后退按钮 navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, // 一页展示多少切换界面 slidesPerView: 'auto', slidesPerGroup : 3, spaceBetween : 20, }) }, getList () { this.$nextTick(function() { this.initswiper(); // setTimeout(function(){mySwiper.slideTo(0,0)},500); // 解决初始化进来后默认是最后一个slide的问题 }); } }, mounted() { this.getList() }, })