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

最新推荐文章于 2024-06-04 08:13:24 发布

置顶爱篮球的程序猿

最新推荐文章于 2024-06-04 08:13:24 发布

阅读量512

点赞数

文章标签： html vue

本文链接：https://blog.csdn.net/LPKJJSHSSB/article/details/107566600

版权

前端小白前来报道，很久没有更新博客了，都不知道被别人关注是什么感觉，突然感觉前端技术太多了，有点要学秃的节奏了呀，下面这个案例是我纠结了好久才找到解决方法，特此给大家提供帮助：

<!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张时才显示左右切换按钮，其他时候不显示
前端小白，没有什么经验，平时也只是看看论坛上大佬的操作，希望这个对你们有帮助！

爱篮球的程序猿

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Vue中上传图片并且通过swiper轮播展示出来

前端小白前来报道，很久没有更新博客了，都不知道被别人关注是什么感觉，突然感觉前端技术太多了，有点要学秃的节奏了呀，下面这个案例是我纠结了好久才找到解决方法，特此给大家提供帮助：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>vue.js文件批量上传</title><link rel="stylesheet" href="./swiper
复制链接

扫一扫