vue element-ui v-for循环el-upload上传图片 动态添加、删除方式

<el-row v-for="(v,i) in RecordOperation.imgList" :key="i">
                <el-col :span='11'>
                    <el-form-item label="图片">
                        <el-upload
                                accept="image/jpeg,image/png"
                                class="avatar-uploader"
                                :action="uploadUrl()"
                                :show-file-list="false"
                                :on-success="dynamicPicSuccess.bind(null, {'index':i,'data':v})"
                                :before-upload="beforeUploadImageDynamicPic">
                            <img v-if="v.picUrl" :src="v.picUrl" class="avatar dynamic">
                            <i v-else class="el-icon-plus avatar-uploader-icon dynamic"></i>
                        </el-upload>
                    </el-form-item>
                </el-col>
                <el-col :span="11">
                    <el-form-item label="图片介绍">
                        <el-input minlength="4" maxlength="20" v-model.trim="v.content"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="2" align="right" v-show="RecordOperation.imgList.length<=2?false:true">
                    <el-button type="text" style="color:red;line-height:32px;" @click="delDynamicPic(i,RecordOperation.imgList)">删除</el-button>
                </el-col>
            </el-row>

// 动态图片验证
            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.filePath;
                // 少于5张图时，自动添加一行
                if(imgList.length<5)
                imgList.push({content: '', picUrl: ""});
            },

            // 移除动态建设图片
            delDynamicPic(i,list) {
                this.$confirm('确认删除该条记录？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    list.splice(i, 1);
                });
            },

<el-upload
	:data={pid:this.pid}
	>
</el-upload>

<el-upload
          :headers="upload.headers"
          :action="upload.url"
          :on-success="handleFileSuccess"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :file-list="completionPhotoList"
          :on-change="changeFile"
        >
        <i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible" :modal="false">
   <img width="100%" :src="dialogImageUrl" alt="" />
</el-dialog>

<script>
export default {
  data() {
    return {
      // 用户导入参数
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/api/common/upload",
      },
 } 
}

<el-upload
  :before-remove="beforeRemove"
  >
</el-upload>
<script>
  export default {
    data() {
      return {
        
      };
    },
    methods: {
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      },
    }
  }
</script>

<el-upload
  multiple
  :limit="3"
  :on-exceed="handleExceed"
  >
</el-upload>
<script>
  export default {
    data() {
      return {
        
      };
    },
    methods: {
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
    }
  }
</script>

<el-upload
  class="avatar-uploader"
  action="https://jsonplaceholder.typicode.com/posts/"
  :show-file-list="false"
  :on-success="handleAvatarSuccess"
  :before-upload="beforeAvatarUpload">
  <img v-if="imageUrl" :src="imageUrl" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>

<script>
  export default {
    data() {
      return {
        imageUrl: ''
      };
    },
    methods: {
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;
 
        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      }
    }
  }
</script>