vue v-for循環el-upload上傳圖片 動態添加、刪除

效果圖

 

 js

 uploadHeader: {
        token: "",
        userId: ""
      },
      dialogImageUrl:"",
      dialogVisible:false,
      RecordOperation:{
        imgList:[
            // {imgList:[{url:"https://img.jd9sj.com/VFVBTkdPVV8yMDIwLTA3LTEwXzAxZDJhNWViZGIxZjRlZmM5OGY2ZWQ1NmI3NjkzNGZjX3U9MjI5MTYwNTU0OSwyMjMxODkzMTkwJmZtPTI2JmdwPTAuanBn",name:""}]},
            // {imgList:[{url:"https://img.jd9sj.com/VFVBTkdPVV8yMDIwLTA3LTEwXzAxZDJhNWViZGIxZjRlZmM5OGY2ZWQ1NmI3NjkzNGZjX3U9MjI5MTYwNTU0OSwyMjMxODkzMTkwJmZtPTI2JmdwPTAuanBn",name:""},{url:"https://img.jd9sj.com/VFVBTkdPVV8yMDIwLTA3LTEwXzAxZDJhNWViZGIxZjRlZmM5OGY2ZWQ1NmI3NjkzNGZjX3U9MjI5MTYwNTU0OSwyMjMxODkzMTkwJmZtPTI2JmdwPTAuanBn",name:""}]},
            // {imgList:[{url:"",name:""}]},
          {
           imgList:[
             {url:"https://img.jd9sj.com/VFVBTkdPVV8yMDIwLTA3LTEwXzAxZDJhNWViZGIxZjRlZmM5OGY2ZWQ1NmI3NjkzNGZjX3U9MjI5MTYwNTU0OSwyMjMxODkzMTkwJmZtPTI2JmdwPTAuanBn",name:""},
             {url:"https://img.jd9sj.com/VFVBTkdPVV8yMDIwLTA3LTEwXzAxZDJhNWViZGIxZjRlZmM5OGY2ZWQ1NmI3NjkzNGZjX3U9MjI5MTYwNTU0OSwyMjMxODkzMTkwJmZtPTI2JmdwPTAuanBn",name:""},
           ],
           content:"ceshi biaoti 111111111111",
           type:2
          },
          {
           imgList:[
             {url:"",name:""},
           ],
           content:"ceshi biaoti 111111111111",
           type:0
          },
          {
           imgList:[],
           content:"ceshi 內容 111111111111",
           type:1
          },
          {
           imgList:[],
           content:"ceshi 標題 2222",
           type:0
          },
           {
           imgList:[],
           content:"ceshi 內容 2222",
           type:1
          },
           {
           imgList:[],
           content:"ceshi 內容 333333",
           type:1
          },
           {
           imgList:[
             {url:"https://img.jd9sj.com/VFVBTkdPVV8yMDIwLTA3LTEwXzAxZDJhNWViZGIxZjRlZmM5OGY2ZWQ1NmI3NjkzNGZjX3U9MjI5MTYwNTU0OSwyMjMxODkzMTkwJmZtPTI2JmdwPTAuanBn",name:""},
           ],
           content:"ceshi biaoti 111111111111",
           type:2
          },
          {
           imgList:[],
           content:"ceshi biaoti 111111111111",
           type:0
          },
          {
           imgList:[],
           content:"ceshi biaoti 111111111111",
           type:0
          },
          {
           imgList:[],
           content:"ceshi biaoti 111111111111",
           type:0
          },
          {
           imgList:[
             {url:"https://img.jd9sj.com/VFVBTkdPVV8yMDIwLTA3LTEwXzAxZDJhNWViZGIxZjRlZmM5OGY2ZWQ1NmI3NjkzNGZjX3U9MjI5MTYwNTU0OSwyMjMxODkzMTkwJmZtPTI2JmdwPTAuanBn",name:""},
           ],
           content:"ceshi biaoti 111111111111",
           type:2
          },
         ]

      },

 addOperation(type){
      this.RecordOperation.imgList.push({imgList:[],content:"",type:type}); 
    },
   handleRemove(obj,res,file) {
     let arr= this.RecordOperation.imgList;
     arr[obj.index].imgList.map((item, index) => {
        console.log(item.url)
        console.log(res.url)
         console.log(this.RecordOperation.imgList[obj.index])
        if (res.url) {
          if (res.url==item.url) {
            if(this.RecordOperation.imgList[obj.index].imgList.length<=1){
              this.RecordOperation.imgList.splice(obj.index,1)
            }else{
               this.RecordOperation.imgList[obj.index].imgList.splice(index, 1) 
            }      
          }else if(res.data == item.url){
            if(this.RecordOperation.imgList[obj.index].imgList.length<=1){
              this.RecordOperation.imgList.splice(obj.index,1)
            }else{
              this.RecordOperation.imgList[obj.index].imgList.splice(index, 1)      
            }     
          }
        }
      })
        console.log(this.RecordOperation.imgList)

    },
    handlePictureCardPreview(file) {
      console.log(file);
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    beforeUploadImageDynamicPic(file){
                var _this = this;
                var isLt10M = file.size / 1024 / 1024  < 10;
                if (['image/jpeg', 'image/png'].indexOf(file.type) == -1) {
                    _this.$message.error('請上傳正確的圖片格式');
                    return false;
                }
                if (!isLt10M) {
                    _this.$message.error('上傳圖片大小不能超過10MB哦!');
                    return false;
                }
   },

            //動態圖上傳成功
   dynamicPicSuccess(obj,res,file) {
                var imgList = this.RecordOperation.imgList
                var index = obj.index;
                imgList[index].picUrl = res.data;
                // 少於5張圖時，自動添加一行
                if(imgList[index].length<5)
                imgList[index].push({content: '', picUrl: ""});
   },

            // 移除動態建設圖片
  delDynamicPic(i,list) {
                this.$confirm('確認刪除該行圖片？', '提示', {
                    confirmButtonText: '確定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    list.splice(i, 1);
                });
  },
  delCurrent(i,list){
     list.splice(i, 1);
  },

<!--vue文本-->


 <el-button type="primary" @click="addOperation('0')">標題+</el-button>
 <el-button type="primary" @click="addOperation('1')">文本+</el-button>
 <el-button type="primary" @click="addOperation('2')">上傳圖片+</el-button>


<div style="max-height:800px;overflow-y:scroll ">
            <div v-for="(v,i) in RecordOperation.imgList" :key="i" style="display:flex">
             <div>
               <span v-if="v.type=='2'"  class="editCon">
                 <el-upload
                    ref="upload"
                    :action="'/admin/sales/tuangouPicUpload'"
                    :headers="uploadHeader"
                    :limit="5"
                    :multiple="true"
                    accept="image/jpeg, image/png"
                    list-type="picture-card"
                    :file-list="RecordOperation.imgList[i].imgList"
                    :before-upload="beforeUploadImageDynamicPic"
                    :on-success="dynamicPicSuccess.bind(null, {'index':i,'data':v})"
                    :on-preview="handlePictureCardPreview"
                    :on-remove="handleRemove.bind(null, {'index':i,'data':v})"
                  >
                    <i class="el-icon-plus"></i>
                </el-upload>
                <el-button type="text" class="delBtn" @click="delDynamicPic(i,RecordOperation.imgList)">刪除圖片及添加框</el-button>
              </span>
              <span v-if="v.type=='0'" class="editCon">
                <el-input v-model.trim="v.content" placeholder="請輸入標題"></el-input>
                <span @click="delCurrent(i,RecordOperation.imgList)" class="delBtn">刪除標題</span>
              </span>
              <span v-if="v.type=='1'" class="editCon">
                <el-input v-model.trim="v.content" placeholder="請輸入內容"></el-input>
                <span @click="delCurrent(i,RecordOperation.imgList)" class="delBtn">刪除內容</span>
              </span>
              </div>
              </div>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt />
              </el-dialog>
          </div>