ant vue from 校验文件上传是否上传

您可以使用Ant Design Vue的Upload组件结合表单校验来实现文件上传前的校验。具体步骤如下：

1. 在表单中使用Upload组件，并设置相关属性，如：

<template>
  <a-form :form="form">
    <a-form-item
      label="上传文件"
      name="upload"
      :rules="[
        { required: true, message: '请上传文件' },
        { validator: validateUpload }
      ]"
    >
      <a-upload
        :before-upload="beforeUpload"
        :on-success="onUploadSuccess"
        :on-error="onUploadError"
      >
        <a-button>
          <a-icon type="upload" /> 选择文件
        </a-button>
      </a-upload>
    </a-form-item>
    <a-form-item>
      <a-button type="primary" @click="submitForm">提交</a-button>
    </a-form-item>
  </a-form>
</template>

<script>
import { FormModel, Upload, Button, Icon } from 'ant-design-vue';

export default {
  components: {
    'a-form': FormModel,
    'a-form-item': FormModel.Item,
    'a-upload': Upload,
    'a-button': Button,
    'a-icon': Icon
  },
  data() {
    return {
      form: this.$form.createForm(this),
      uploadUrl: 'https://www.example.com/upload',
      uploadFile: null
    };
  },
  methods: {
    beforeUpload(file) {
      // 在上传之前进行校验，例如检查文件大小、类型等
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error('上传文件大小不能超过 2MB!');
      }
      return isLt2M;
    },
    onUploadSuccess(response) {
      // 上传成功后的处理
      this.uploadFile = response.file;
    },
    onUploadError(error) {
      // 上传失败时的处理
      this.$message.error(`上传失败: ${error}`);
    },
    validateUpload(rule, value, callback) {
      // 自定义校验规则，例如检查文件类型是否符合要求
      if (this.uploadFile && this.uploadFile.type !== 'image/jpeg') {
        callback(new Error('上传文件类型不正确'));
      } else {
        callback();
      }
    },
    submitForm() {
      this.form.validateFields((err, values) => {
        if (!err) {
          // 校验通过，提交表单
          console.log(values);
        }
      });
    }
  }
};
</script>

2. 在beforeUpload方法中进行上传前的校验，例如检查文件大小、类型等。

3. 在onUploadSuccess方法中处理上传成功后的文件信息。

4. 在validateUpload方法中自定义校验规则，例如检查文件类型是否符合要求。

5. 在submitForm方法中调用form.validateFields方法进行表单校验，校验通过后提交表单。

注意：以上代码仅供参考，具体实现方式需要根据您的业务需求进行调整。