elementUI form upload file verification

1. Target effect

        When using elementUI for form verification, you can only verify input boxes, drop-down selection lists, etc., but you don’t see that you can verify file uploads, which means you need to do it manually! The target effect is as follows:

        All in all, this is the effect: (1) Do not click the checkbox, click submit, and the verification can pass; (2) Click the checkbox, do not upload the file, and the verification fails; (3) Click the checkbox, upload file, the prompt disappears, and the verification is passed; (4) Click the check box to display the required style display; if you do not click the check box, the red dot will not be prompted;

2. Trample record

        1. You need to fill in the prop in the form-item, and you also need to fill in the rules in the data, and the value of the prop is consistent with the rules corresponding to the rules, otherwise the verification effect will not be achieved.

 

 

        2. When customizing rules, if you do not write callback, the verification will not take effect

 

        3. Dynamic setting verification will be used here. Many people’s first reaction is to dynamically set props, that is, write like this:

:prop="Condition? 'Rules under self-defined rules' ? ' '"

            3.1 Such a prop does not take effect, it should be written as : prop="Condition? 'Rules under self-defined rules'? 'empty'"

                3.1.1 There is still a problem with this way of writing. What if the rules defined under rules are empty in the future, so the best practice is not to dynamically set props, write props to death, and verify them in the rule validator.

 

        4. The action="https://jsonplaceholder.typicode.com/posts/" of el-upload will report a cross-domain error when uploading a file, and sometimes a 503 error will be reported. Cross-domain problems can be resolved through the Google Chrome plug-in 

Allow CORS: Access-Control-Allow-Origin0.1.5   has been resolved; in fact, in real projects, the action is followed by the address of the backend, and these two problems are naturally solved.

 

        5. The generation of the red dot is realized by dynamically binding the class name:

:class="条件？’is-required‘ ：’ ‘ "

 

        6. Use  this.$refs.refName.clearValidate(prop value)  to clear the validation prompt

3. Code implementation

<template>
  <div id="app">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
      <el-form-item label="活动名称:" :class="showFlag ? 'is-required' : ''" prop="file">
        <el-upload action="https://jsonplaceholder.typicode.com/posts/" :on-remove="handleRemove"
          :on-success="uploadSuccess">
          <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
      </el-form-item>
      <el-form-item label="必上传文件:">
        <input type="checkbox" v-model="showFlag" @change="handleCheckBoxChange" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    // 文件上传校验规则
    const fileMustUpload = (rule, value, callback) => {
      if (this.showFlag && this.file == null) {
        // 未上传文件
        callback("请上传文件");
      }
      callback();
    }
    
    return {
      showFlag: false,    //判断红点是否显示，与复选框的值绑定在一起
      ruleForm: {
        file: null    //接受文件值
      },
      rules: {
        file: [
            //自定义校验器
          { validator: fileMustUpload, trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    // 文件移除事件监听
    handleRemove() {
      this.file = null;
    },

    // 提交
    onSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          alert('上传成功!');
        }
      });
    },

    // 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
    uploadSuccess(file) {
      this.clearFileUploadValidate();
      this.file = file
    },

    // 清空文件上传校验 
    clearFileUploadValidate() {
      this.$refs.ruleForm.clearValidate('file');
    },

    // 监听复选框值的变化
    handleCheckBoxChange(event) {
      // 复选框的值绑定给showFlag，并用它来控制红点必填样式
      this.showFlag = event.target.checked;
      if (!this.showFlag) {
        this.clearFileUploadValidate();
      }
    }
  },

}
</script>

<style>
.el-form {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#app {
  height: 100%;
}
</style>