vue 循环上传图片 点击查看大图

<template>
    <div> 
        <div  v-for="(item,index) in  picture"  :key="item.id" class="box_uploader">
             <div @click="gainId(index)">
                  <el-upload
                         class="uploader_diyi"
                        action="123"
                        :show-file-list="false"
                        :http-request="upload"//利用自己的方法上传
                        :before-upload="beforeAvatarUpload">//上传前压缩一下照片
                         <div class="zhuanquanquan">
                              <i  class="el-icon-plus avatar-uploader-icon"></i>
                               <p>{{item.title}}</p>
                        </div>
                    </el-upload>
                      <div  class="img_up">
                         <el-image 
                            v-if=" item.pic != ''"  //不等于空的时候 显示图片
                             style="width: 100%; height: 100%"
                             :src="GLOBAL.BASE_URL + item.pic" //‘GLOBAL.BASE_URL （http://192.68.1.1...）’这个是我写的一个全局域名可以忽略
                              :preview-src-list="getImgList(index)">
                        </el-image>
                       </div>
                </div>
           </div>
    </div>
</template>

<script>
    export default {
          data() {
                return {
                      srcList:[],//点击看大图
                      currentId:'',//下标
                       picture:[
                            {id:0,title:'门头照片',pic:''},
                            {id:1,title:'前台照片',pic:''},
                            {id:2,title:'团队照片',pic:''},
                        ],
          },
           methods: {
             //通过点击获得下标位置
              gainId(i){
                  this.currentId = i 
              },
                   //上传照片
              upload(file){
                   const loading = this.$loading({
                        lock: true,
                        text: '上传中...',
                        spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, 0.7)'
                    });
                const formData = new FormData();
                formData.append('file',file.file);
                formData.append('end_of_lifeVehiclesId',this.currentId);
                formData.append('w',500);
                formData.append('h',500);
                var this_ = this
                  //this.changeData（），是我写的一个全局调用ajax的方法  可以直接写  axios.post（）
                 this.changeData('upload/img',formData,function(res){
                    loading.close();
                    this_.picture[this_.currentId].pic = res.data.data //接口返回的图片链接 
                    this_.srcList[this_.currentId] = res.data.data
                })
              
            },
                  //以此打开查看大图
                  getImgList(index){
                        let arr = JSON.parse(JSON.stringify(this.srcList))
                        for(let i=0;i<index;i++){
                            arr.push(arr[0]);
                            arr.splice(0,1);
                      }
                    return arr
                },
            //视频上传前进行压缩
             beforeAvatarUpload(file) {
                return new Promise((resolve, reject) => {
                       compress(file).then(res=>{ // 压缩方法在后面 
                        resolve(res)
                       })
                    }).then(res=>{
                        if(res == 0) {
                            this.$message({showClose: true,duration:1500,message: '图片大小不能小于15像素',type: 'error'});
                           return reject()
                        }else{
                            return res
                        }
                    })
             },
          }
    }
</script>

<style lang="scss" scoped>

</style>

这里是写了一个数组对象进行循环的，因为就3张。所有没有写3个上传的方法
利用这样的方法进行了 循环上传并且以此点开大图