vue elementUI 上传非空验证

在Vue中使用Element UI时，可以通过自定义表单验证规则来实现上传文件非空的验证。以下是一个简单的示例，展示了如何在Element UI的<el-upload>组件中添加非空验证：

<template>
  <el-form :model="form" :rules="rules" ref="uploadForm">
    <el-form-item prop="file">
      <el-upload
        ref="upload"
        :auto-upload="false"
        action="https://jsonplaceholder.typicode.com/posts/"
        :on-change="handleChange"
      >
        <el-button slot="trigger" size="small" type="primary">选择文件</el-button>
      </el-upload>
    </el-form-item>
    <el-button size="small" type="primary" @click="submitForm">上传</el-button>
  </el-form>
</template>
 
<script>
  export default {
    data() {
      return {
        form: {
          file: null
        },
        rules: {
          file: [
            { required: true, message: '请选择文件', trigger: 'change' }
          ]
        }
      };
    },
    methods: {
      handleChange(file, fileList) {
        this.form.file = file.raw;
      },
      submitForm() {
        this.$refs.uploadForm.validateField('file', (valid) => {
          if (!valid) {
            alert('验证失败!');
            return;
          }
          this.$refs.upload.submit();
        });
      }
    }
  };
</script>

在这个例子中，我们定义了一个带有验证规则的表单，其中file字段是必须的。当用户选择文件时，handleChange方法会被调用，并更新form.file。在提交表单之前，submitForm方法会调用validateField来验证file字段。如果验证失败，它会显示一个警告；如果验证成功，它会自动上传文件。