element 上传附件校验

      <el-form-item label="上传附件：" prop="businessContract">
        <el-upload
          ref="upload"
          action=""
          :http-request="upload"
          :on-preview="handlePreview"
          accept=".xls,.xlsx,.doc,.docx,.pdf"
          :on-remove="handleUploadRemove"
          :file-list="fileList"
          :limit="1"
          :multiple="false"
          :on-exceed="onExceed"
          :on-error="uploadFalse"
          :on-success="uploadSuccess"
          :on-change="handleChange"
          :before-upload="beforeUploadExcel">
          <el-button size="small" type="primary">点击上传</el-button>
          <div class="el-upload__tip" slot="tip">支持文件格式为：.xls,.xlsx,.doc,.docx,.pdf,大小不超过100M</div>
        </el-upload>
      </el-form-item>

 

 

      let checkBusinessContract = (rule, value, callback) => {
        let _this = this;
        let isNull = validatenull;
        if (isNull(_this.ruleForm.businessContract)) {
          return callback(new Error('上传附件不能为空'));
        }
        return callback();
      };

businessContract: [{required: true, validator: checkBusinessContract, trigger: 'change'}],

以上代码已经实现校验

但是有一个问题就是得保存的时候校验文字才会消失

 这样明显是不合理的

所以我在el-upload上绑定了一个事件，:on-change 文件状态改变时触发的钩子（上传成功或失败都会被调用）

然后

 

      handleChange(file, fileList){
        this.$refs.ruleForm.clearValidate('businessContract');
      },

这样就实现了校验的清除

下面是实现效果：