elementUI vue Upload和vant Uploader的开发中的经验总结

由于工作的需要，基于vue框架的手机端和PC端项目做了好多个了，上传图片这个功能经常要用到，必要把他总结一下。

1.elementUI Upload

图片放大功能

<template>
  <div class="app-container">
    <el-upload
      action="https://jsonplaceholder.typicode.com/posts/"
      list-type="picture-card"
      multiple
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove">
      <i class="el-icon-plus"></i>
  </el-upload>
  <el-dialog :visible.sync="dialogVisible">
    <img width="100%" :src="dialogImageUrl" alt="">
  </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible: false

    }
  methods: {
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    }
  }
}
</script>

思路：点击图片，把点击的图片地址赋值给弹出层的img里，然后显示。支持单图放大，不支持图片轮播显示。vant Uploader支持轮播，后面有说明。

多图上传

multiple属性

2.vant Uploader

<div class="title">凭证</div>
<div class="bx-shiyou-list">
     <div class="operating">
     <div class="operating-list">
             <div class="pic">
                 <template>
                     <li v-for="(item,index) in bxDetail.imgs" :key="index" @click="getImg(bxDetail.imgs,index)"><img :src="item.imgUrl" alt="" ></li>
                     <li class="no" v-if="bxDetail.imgs.length==0">暂无凭证</li>
                 </template>
                 </div>
         </div>
     </div>
</div>
methods：{
	 getImg(pa1,index){
	     console.log(pa1,'pa1');
	     var images=[];
	     pa1.forEach(element => {
	         images.push(element.imgUrl);
	     });
	     ImagePreview({
	     images:images,
	     showIndex:true,
	     startPosition:index,
	     loop:false,
	     }) 
	 },
 }

思路：把所有图片，索引传入。这样点击的时候就可以轮播了。

总结：不管是pc端还是手机端，图片放大并且可以轮播的原理是一样的。
都可以添加一个弹出层，层里面放置一个类似swiper的轮播插件，点击的时候根据索引让swiper里面显示对应的图片

来源：CSDN

作者：动力先行

链接：https://blog.csdn.net/weixin_38415876/article/details/104306996