关于form验证upload组件必填required时，是否选择文件的解决方法

[LK19931225]

1.背景描述：做一个表单上传的需求，有一项是文件上传，且是必填项，使用a-upload组件
2.问题描述：使用过程中发现沿用官方的方式，类似于这样 ,使用prop加v-model的方式绑定，无法像输入框下拉框等组件那样被检测到

<a-form-model-item label="分区方案名称" prop="file">
      <a-upload v-model="form.file" />
</a-form-model-item>

3.解决办法：使用手动上传方式，利用fileList加自定义上传customRequest，this.$refs.ruleForm.validate()校验即可
如下：

<a-form-model :model="form" :rules="rules" ref="ruleForm">
  <a-form-model-item label="上传PDF" prop="file">
        <a-upload
          :multiple="false"
          accept=".pdf"
          :file-list="fileList"
          :remove="handleRemove"
          :customRequest="customRequest"
        >
          <a-button> <a-icon type="upload" />导入 </a-button>
        </a-upload>
      </a-form-model-item>
 </a-form-model>

handleRemove(file) {
     const index = this.fileList.indexOf(file)
     const newFileList = this.fileList.slice()
     newFileList.splice(index, 1)
     this.fileList = newFileList
     this.form.file = undefined
   },
   customRequest(file) {
     this.fileList = [
       {
         uid: Math.random() * 1000,
         name: file.file.name,
         status: 'done',
       },
     ]
     this.form.file = file.file
   },

data里面

  data() {
    return {
      fileList: [],
      form: {
        file: undefined,
      },
      rules: {
        file: [{ required: true, message: ‘请选择文件上传’, trigger: ['change', 'blur'] }],
      },
    }
  },

4.后记
由于维护的是好几年前vue2的项目，使用的antd-design-vue 1.6.3版本，这个版本表单还没支持a-upload的必填，需要自己处理，现如今antd-design-vue已到4.x版本，暂未使用到4.x,不知新版是否已支持upload组件在表单中校验（ps:在antd react版本中，form表单会通过value/onChange两个属性配合，默认收集upload上传的值，可以检测到文件是否上传了，能触发表单校验，无需自己维护）