vue3+ant design vue实现表单及文件上传必输项设置校验~

1、需求：表单与文件上传设置必输项校验

2、思路：直接将文件上传放在form表单中，特别注意需要将文件列表定义在表单数据中或进行转存，否则会有2个数据来源，数据校验就检测不到文件列表的变化，造成无法同时校验。

3、代码

<a-form
      ref="form"
      :model="formState"
      :label-col="{ span: 8 }"
      :wrapper-col="{ span: 16 }"
      :rules="rules"
    >
      <a-row>
        <a-col :span="18">
          <a-form-item name="xuanzechanpinxian" label="产品" labelAlign="right">
            <a-select v-model:value="formState.xuanzechanpinxian">
              <a-select-option value="1">T</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row style="line-height: 32px">
        <a-col :span="18">
          <a-form-item name="fileList" label="上传文件" labelAlign="right">
            <a-upload
              v-model:file-list="fileList"
              name="文件上传"
              action=""
              :customRequest="upDown"
              :beforeUpload="beforeUpload"
              @remove="removeFile"
              accept=".xlsx,.xls"
            >
              <a-button> 选择文件 </a-button>
            </a-upload>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <a-space style="display: flex; flex-direction: row; justify-content: center">
      <a-button type="primary" @click="submitSure">确定</a-button>
      <a-button @click="cancel">取消</a-button>
    </a-space>


//表单数据
  interface myObject {
    xuanzechanpinxian: string;
    fileList: any[];
  }
  const formState = ref<myObject>({
    xuanzechanpinxian: '', 
    fileList: [],
  });
  const rules = {
    xuanzechanpinxian: [
      {
        required: true,
        trigger: 'change',
      },
    ],
    fileList: [
      {
        required: true,
        message: '请上传文件',
        trigger: 'blur',
      },
    ],
  };


// 文件上传测试
  import { message } from 'ant-design-vue';
  // 检查文件类型，如果文件类型正确，则继续上传,false指停止上传，true指继续上传，file是文件
  const beforeUpload = (file) => {
    //检查文件类型是否为Excel
    const isExcel =
      file.type === 'application/vnd.ms-excel' ||
      file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
    if (!isExcel) {
      message.error('只能上传Excel文件！');
      return false;
    }
    return true;
  };
  // 导入文件
  const upDown = async (file) => {
    const random = Math.random();
    const fileName = `${random}${file.file.name}`;
    // OSS上传签名
    queryAutograph({}).then(async (res) => {
      const { host, dir, OSSAccessKeyId, success_action_status, Signature, policy } = res;
      const address = dir + fileName;
      const url = host;
      const formData = new FormData();
      formData.append('key', address);
      formData.append('OSSAccessKeyId', OSSAccessKeyId);
      formData.append('Signature', Signature);
      formData.append('policy', policy);
      formData.append('success_action_status', success_action_status);
      formData.append('file', file.file);
      // 上传OSS
      try {
        await uploadOss({ url, formData });
      } catch (e) {
        message.error('上传失败');
        return;
      }
      //拼接地址
      downloadUrl.value = host + '/' + address;
      let list: any = [];
      list.push({ name: file.file.name, url: downloadUrl });
      fileList.value = list;
      formState.value.fileList = fileList.value; //转存到表单数据中，便于校验
    });
  };
  // 删除文件
  const removeFile = (file) => {
    const index = fileList.value.indexOf(file.file);
    const newFileList = fileList.value.slice();
    newFileList.splice(index, 1);
    fileList.value = newFileList;
    formState.value.fileList = []; //转存到表单数据中，便于校验
  };

//确定
  const form = ref();
  const submitSure = () => {
    form.value
      .validateFields()
      .then((values) => {
        console.log('验证通过，表单数据为：', values);
      })
      .catch((errorInfo) => {
        console.log('验证失败，错误信息为：', errorInfo);
      });
  };