v-for动态添加upload时，使用$refs消除成功上传后的验证

使用vue+elementUI，可以实现动态新增表单功能，但是在新增的表单中有upload上传时，我们需要对上传成功的upload手动消除验证

<template>
  <el-form ref="dynamicCertificateForms" :model="dynamicCertificateForms" label-width="110px" >
    <el-row :gutter="24" v-for="(domain, index) in dynamicCertificateForms.domains" :key="domain.key">
      <el-col :span="6">
        <el-form-item label="资质证书附件" style="width:388px"  :ref="'uploadForm' + index" :prop="'domains.' + index + '.qEnclosure'" placeholder="附件" :rules="dataRule.qenclosure"
        >
          <div @click="getImgIndex(index)" >
        <el-upload
          v-model="domain.qenclosure"
          :headers="headers"
          class="avatar-uploader"
          action="/admin/sys-file/upload"
          :on-success="uploadSuccessful"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :before-upload="beforeAvatarUpload"
          :show-file-list="false"
          >
          <img v-if="avatarUrl" id="avatar" :src="avatarUrl" class="avatar"/>
          <i v-else class="el-icon-plus avatar-uploader-icon" />
        </el-upload>
          </div>
      </el-form-item>
      </el-col>
      <el-col >
      <el-form-item v-if="dynamicCertificateForms.domains.length !== 1">
        <el-button @click="deleteItem(domain, index)"  type="info" style="float: left" size="medium" round="true">删除该组资质证书</el-button>
      </el-form-item>
      </el-col>
    </el-row>
<el-row>
    <el-form-item>
      <el-button @click="addItem"  type="primary" style="margin-left: 30%" size="medium" round="true">再添加一组资质证书</el-button>
    </el-form-item>
</el-row>
  </el-form>
</template>
<script>

    import {fetchList, getObj, addObj, putObj,delObj,getByParentId,getcertificatecategoryList,fetchcertificatecategoryList} from '@/api/sjycertificatecategory'
    import { validatenull } from "@/util/validate";
    import store from "@/store";
    export default {
        name:"certificateinfor",
        data () {
            return {
                dynamicCertificateForms: {
                    domains: [ {
                            qid: 0,
                            qcategoryname: '无',
                            qlevelcategory: '无',
                            qlevel: '无',
                            qlevel2:'无',
                            qlevel3: '无',
                            node: '',
                            qjinfo: '',
                            qcertificatesnumber: '',
                            qawardmechanism: '',
                            qstartdate: '',
                            qclosingdate: '',
                            productionnumber: '',
                            productiondata: '',
                            // 附件
                            qenclosure: '',
                            qcreatetime: '',
                            qauditstatus: '',
                            qupdatetime: '',
                            uid: this.$store.getters.userInfo.userId,
                            sonid: '',
                            qapplication: ''
                    }],
                },dataRule: {
                    qcategoryname: [
                        { required: true, message: '一级类别不能为空', trigger: 'blur' }
                    ],
                    qlevelcategory: [
                        { required: true, message: '二级类别不能为空', trigger: 'blur' }
                    ],
                    qlevel: [
                        { required: true, message: '三级类别不能为空', trigger: 'blur' }
                    ],
                    qlevel2: [
                        { required: true, message: '四级类别不能为空', trigger: 'blur' }
                    ],
                    qlevel3: [
                        { required: true, message: '五级类别不能为空', trigger: 'blur' }
                    ],
                    node: [
                        { required: true, message: '其他类别的下级类别不能为空', trigger: 'blur' }
                    ],
                    qjinfo: [
                        { required: true, message: '资质证书类型补充不能为空', trigger: 'blur' }
                    ],
                    qcertificatesnumber: [
                        { required: true, message: '证件编号不能为空', trigger: 'blur' }
                    ],
                    qawardmechanism: [
                        { required: true, message: '颁发机构不能为空', trigger: 'blur' }
                    ],
                    qstartdate: [
                        { required: true, message: '开始日期不能为空', trigger: 'blur' }
                    ],
                    qclosingdate: [
                        { required: true, message: '证件有效期（截止日期）不能为空', trigger: 'blur' }
                    ],
                    productionnumber: [
                        { required: true, message: '生产许可证编号不能为空', trigger: 'blur' }
                    ],
                    productiondata: [
                        { required: true, message: '生产许可证有效期不能为空', trigger: 'blur' }
                    ],
                    qenclosure: [
                        { required: true, message: '附件不能为空', trigger: 'blur' }
                    ],
                    qcreatetime: [
                        { required: true, message: '创建时间不能为空', trigger: 'blur' }
                    ],
                    qauditstatus: [
                        { required: true, message: '审核状态：0.初始化 1.待审核 2.审核失败 3.审核成功 4.申请变更不能为空', trigger: 'blur' }
                    ],
                    qupdatetime: [
                        { required: true, message: '更新时间不能为空', trigger: 'blur' }
                    ],
                    uid: [
                        { required: true, message: '用户ID不能为空', trigger: 'blur' }
                    ],
                    sonid: [
                        { required: true, message: '子 id不能为空', trigger: 'blur' }
                    ],
                    qapplication: [
                        { required: true, message: '申请书不能为空', trigger: 'blur' }
                    ]
                },
                visible: false,
                // 资质证书类别
                certificatecategoryList:[],
                certificatecategoryTreeList:[],
                // 一类证书集合
                firstcatecategoryList:[],
                // 二类证书集合
                secondcatecategoryList:[],
                // 三类证书集合
                thirdcatecategoryList:[],
                // 四类证书集合
                forthcatecategoryList:[],
                // 五类证书集合
                fifthcatecategoryList:[],
                // 是否展示2到5集合
                otherChoied: true,
                filelist:[],
                // 文件上传需要记录上传者，所以需要上传用户token信息，绑定在header上
                headers: {
                    Authorization: "Bearer " + store.getters.access_token,
                },
                avatarUrl: "",
                currentImgIndex: '',

            }
        },
        created(){
            this.getFirstcateCategoryList()
            this.uid = this.$store.getters.userInfo.userId
        },
        methods: {
            getImgIndex(index) {
                this.currentImgIndex = index
            },
            addItem() {
                this.dynamicCertificateForms.domains.push({
                        qid: 0,
                        qcategoryname: '无',
                        qlevelcategory: '无',
                        qlevel: '无',
                        qlevel2:'无',
                        qlevel3: '无',
                        node: '',
                        qjinfo: '',
                        qcertificatesnumber: '',
                        qawardmechanism: '',
                        qstartdate: '',
                        qclosingdate: '',
                        productionnumber: '',
                        productiondata: '',
                        // 附件
                        qenclosure: '',
                        qcreatetime: '',
                        qauditstatus: '',
                        qupdatetime: '',
                        uid: this.$store.getters.userInfo.userId,
                        sonid: '',
                        qapplication: '',
                        key: Date.now()
                    },
                )
            }, deleteItem(item, index) {
                this.dynamicCertificateForms.domains.splice(index, 1)
            }, saveCerficateFomrToCache(index){
                // localStorage.setItem("certificateDataFormList",this.dynamicCertificateForms.domains[index])
            },
            uploadSuccessful(res, file, fileList) {
                debugger
                this.avatarUrl = URL.createObjectURL(file.raw);
                this.dynamicCertificateForms.domains[this.currentImgIndex].qenclosure = res.data.url;
                var rs = this.dynamicCertificateForms.domains[this.currentImgIndex].qenclosure
                this.$refs['uploadForm'+this.currentImgIndex][0].clearValidate()
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview(file) {
                console.log(file);
            },
            beforeAvatarUpload(file) {
                var testmsg=file.name.substring(file.name.lastIndexOf('.')+1)
                const extension = testmsg === 'jpg'
                const extension2 = testmsg === 'png'
                const isLt2M = file.size / 1024 / 1024 < 10
                if(!extension && !extension2) {
                    this.$message({
                        message: '上传文件只能是 jpg、png格式!',
                        type: 'warning'
                    });
                }
                if(!isLt2M) {
                    this.$message({
                        message: '上传文件大小不能超过 10MB!',
                        type: 'warning'
                    });
                }  return extension || extension2 && isLt2M
            },
            valicertificateForm(){
                let certificateValidateResult = true
                this.$refs['dynamicCertificateForms'].validate((valid) =>{
                    if(valid){
                        // 将form数据缓存
                        localStorage.setItem("dynamicCertificateForms", this.dynamicCertificateForms);
                        // 审核状态值缓存
                        localStorage.setItem("basicValidaResult", certificateValidateResult);
                    }else{
                        alert("资质证书校验不通过,记得来处理")
                        certificateValidateResult =  false
                    }
                });
                return certificateValidateResult
            }
        }
    }
</script>
<style scoped>
  .avatar-uploader .el-upload {
    border: 3px dashed #9f1d2b;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    border: 3px dashed #9f1d2b;
    font-size: 28px;
    color: #030204;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>