前端小白前来报道,很久没有更新博客了,都不知道被别人关注是什么感觉,突然感觉前端技术太多了,有点要学秃的节奏了呀,下面这个案例是我纠结了好久才找到解决方法,特此给大家提供帮助:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue.js文件批量上传</title>
<link rel="stylesheet" href="./swiper-4.5.3/dist/css/swiper.min.css">
<style>
.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;
}
</style>
</head>
<body>
<div id="app">
<div class="hello">
<div class="upload">
<div class="upload_warp">
<div class="upload_warp_left" @click="fileClick">
<img src="image/upload.png">
</div>
<input @change="fileChange($event)" type="file" id="upload_file" multiple style="display: none">
<div class="upload_warp_img" v-show="imgList.length!=0">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="upload_warp_img_div swiper-slide" v-for="(item,index) of imgList">
<div class="upload_warp_img_div_top">
<img src="image/del.png" class="upload_warp_img_div_del" @click="fileDel(index)">
</div>
<img :src="item.file.src">
</div>
</div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev" v-show="imgList.length > 3"></div>
<div class="swiper-button-next" v-show="imgList.length > 3"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://www.jq22.com/jquery/vue.min.js"></script>
<script src="./swiper-4.5.3/dist/js/swiper.min.js"></script>
<script>
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.value = ''
},
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 = 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()
},
})
</script>
</body>
</html>
主要难点有:
1.当需要多个展示在显示框时,需要添加slidesPerView: ‘auto’,不能给具体的值,因为给具体的值的话会造成切换时移动距离的误差
2.使用间距时最好使用spaceBetween : 20,而不使用margin左右边距,不然也会影响移动的误差
展示图如下:
我在后面还做了一个判断,当图片数量为4张时才显示左右切换按钮,其他时候不显示
前端小白,没有什么经验,平时也只是看看论坛上大佬的操作,希望这个对你们有帮助!