ant vue 校验文件上传

你可以使用 Vue.js 的插件 Vue-Validator 来实现文件上传的校验。首先，你需要在项目中安装 Vue-Validator 插件，然后在需要使用校验的组件中引入该插件。

下面是一个简单的例子，展示了如何使用 Vue-Validator 来校验文件上传：

<template>
  <div>
    <input type="file" @change="onFileChange" />
    <p v-if="errors.length">{{ errors[0] }}</p>
  </div>
</template>

<script>
import VueValidator from 'vue-validator'

export default {
  name: 'FileUpload',
  data() {
    return {
      file: null,
      errors: []
    }
  },
  mixins: [VueValidator],
  methods: {
    onFileChange(event) {
      this.file = event.target.files[0]
      this.$validate()
    }
  },
  validators: {
    file: (value) => {
      if (!value) {
        return '请上传文件'
      }
      if (value.size > 1024 * 1024) {
        return '文件大小不能超过1M'
      }
      return true
    }
  }
}
</script>

在上述代码中，我们定义了一个名为 FileUpload 的组件，它包含一个文件上传的输入框和一个用于显示错误信息的段落。在组件的 data 中定义了一个 file 变量和一个用于存储错误信息的 errors 数组。

在组件的 methods 中定义了一个 onFileChange 方法，用于在文件上传的输入框内容变化时更新 file 变量，并且调用 this.$validate() 方法进行校验。

在组件的 validators 中定义了一个 file 校验规则，用于判断文件是否为空和文件大小是否超过1M，并根据校验结果返回相应的错误信息或者 true。

最后，在组件中使用 Vue-Validator 提供的 mixins 属性将 VueValidator 插件混入组件中，这样就可以使用该插件提供的校验方法了。当输入框内容变化时，会触发校验规则并将校验结果存储在 errors 数组中，用于在页面上显示错误信息。