vue+ant design怎么上传图片时不触发rules校验上传后才触发rules校验

在Ant Design中，可以使用自定义验证规则来实现上传图片时不触发rules校验，上传后才触发rules校验的需求。具体实现如下：

1. 在Vue组件中，定义一个data属性，用于保存上传图片的文件列表：

data() {
  return {
    fileList: []
  }
}

2. 在Ant Design的Upload组件中，设置beforeUpload属性，用于在上传前对文件进行验证。在这里，我们可以返回false，阻止上传，并将文件添加到fileList中。代码如下：

<template>
  <a-upload
    :before-upload="beforeUpload"
    :file-list="fileList"
    action="/upload"
    name="file"
    multiple
  >
    <a-button icon="upload">
      Select File
    </a-button>
  </a-upload>
</template>

<script>
export default {
  data() {
    return {
      fileList: []
    }
  },
  methods: {
    beforeUpload(file) {
      this.fileList.push(file)
      return false
    }
  }
}
</script>

3. 在Ant Design的Form组件中，设置rules属性，用于在表单提交前对表单进行验证。在这里，我们可以判断fileList中是否有文件，如果有则返回true，否则返回false。代码如下：

<template>
  <a-form :model="form" :rules="rules" @submit="handleSubmit">
    <a-form-item label="Name" :validate-status="getFieldError('name') ? 'error' : ''" :help="getFieldError('name')">
      <a-input v-model="form.name" placeholder="Please input your name" />
    </a-form-item>
    <a-form-item>
      <a-button type="primary" html-type="submit">
        Submit
      </a-button>
    </a-form-item>
  </a-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: ''
      },
      rules: {
        name: [{ required: true, message: 'Please input your name' }],
        fileList: [
          { validator: (rule, value) => value && value.length > 0, message: 'Please upload your file' }
        ]
      }
    }
  },
  methods: {
    handleSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          // Submit form
        }
      })
    },
    getFieldError(name) {
      const errors = this.$refs.form.getFieldError(name)
      if (errors) {
        return errors.join(', ')
      }
      return ''
    }
  }
}
</script>

通过以上步骤，我们就可以实现上传图片时不触发rules校验，上传后才触发rules校验的需求