elementui的upload必传检验

elementui的upload必传检验

el-upload在rules里面绑定的不是fileList，而是ref的值

<template>
  <div class="box">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" size="mini">
      <el-form-item label="数据源" prop="myfile">
        <el-upload class="upload-demo" action="" ref="myfile" :file-list="ruleForm.fileList" :auto-upload="false" :on-change="uploadChange">
          <el-button slot="trigger" size="mini" type="primary">选取文件</el-button>
        </el-upload>
      </el-form-item>
      <el-form-item label="测试集名称" prop="collectionName">
        <el-input v-model="ruleForm.collectionName" size="mini"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="mini" type="primary" @click="saveDialog">保存</el-button>
      </el-form-item>

    </el-form>
  </div>
</template>
<script>
export default {
  data(){
    return{
      ruleForm:{
        fileList:[],
        collectionName:''
      },
      rules:{
        myfile:[//注意这里是upload的ref绑定的值
          {required:true,validator:this.validateFiles}
        ],
        collectionName:[
          {required:true,message:'请选择测试集名称',trigger:"change"}
        ]
      }
    }
  },
  methods:{
    saveDialog(){
       this.$refs.ruleForm.validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
    },
    uploadChange(file,fileList){
      if(fileList.length&&fileList.length>=1){
        this.$refs.ruleForm.validateField("myfile")
      }
      if(fileList.length>1){
        fileList.splice(0,1)
      }
    },
    validateFiles(rule,value,callback){
      let files=this.$refs.myfile.uploadFiles;
      if(!files.length){
        callback(new Error("请选择要上传的文件！"))
      }
      callback()
    }
  }
}
</script>
<style lang="less">
.box{
  width: 400px;
}
</style>

效果：