react hook + antd upload 通过fileList控制文件列表展示status为uploading

import React, { useState } from 'react'import { Modal, Form, Upload, message, Button } from 'antd'import { UploadOutlined } from '@ant-design/icons'import { TableListItem } from '@/services/data.d'import { importByExcelUrl } from '@/services/manually'import { validFileSize } from '@/utils/validate'
export interface FormValueType extends Partial<TableListItem>{
  time?: string;
  [propName: string]: any
}

const FormItem =Form.Item

interface CreateFormProps {
  modalVisible: boolean;
  onCancel: () => void;
  onConfirm: (values: FormValueType) => void;
  values: any
}
const formLayout ={
  labelCol: { span: 7},
  wrapperCol: { span: 13},
}

const UploadForm: React.FC<CreateFormProps> = (props) =>{
  const { modalVisible, onConfirm, onCancel } =props
  const [bussinessFileList, setFilelist] = useState<any[]>([])
  const [uploadFileList, setUploadFilelist] = useState<any[]>([])
  const [form] =Form.useForm()

  form.setFieldsValue({})

  const uploadprops ={
    name: 'file',
    action: importByExcelUrl(),
    headers: {
      authorization: 'authorization-text',
    },
    accept:
      '.csv,.xls,.xlsx, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel',
    data: { businessCode: props.values },
    disabled: bussinessFileList.length === 1,
    fileList: uploadFileList,
    beforeUpload(file: any) {
      //console.log(6, file, uploadFileList.length, validFileSize(file))
      if (uploadFileList.length > 0) {
        message.warning('只能上传一个文件')
        return false}
      if (file.size === 0) {
        message.error('文件不能为空')
        return false}
      returnvalidFileSize(file)
    },
    onChange(info: any) {
      let files: any[] =[...info.fileList]
      if (info.file.status === 'done') {
        if(info.file.response) {
          if (info.file.response.responseCode === '000000') {
            //files = [...info.fileList]
message.success(`${info.file.name} 文件上传成功`)
          } else{
            message.error(info.file.response.responseMsg)
          }
        } else{
          message.error(`${info.file.name} 上传失败.`)
        }
      } else if (info.file.status === 'error') {
        message.error(`${info.file.name} 上传失败.`)
      }
      files = files.filter((item : any) =>{
        return item.response?.responseCode === '000000'})
      files =JSON.parse(JSON.stringify(files))
      console.log(66666, info, files)
      setUploadFilelist(files)
      setFilelist(files)
    },
  }

  const renderContent = () =>{
    return(
      <>
        <FormItem
          name='uploads'label='上传模板'required
          rules={[{ validator: (rule, value, callback) =>{
            if (value && value.fileList &&value.fileList.length) {
              console.log(77, value)
              if (value.file.response && value.file.response.responseCode === '000000') {
                callback()
              } else if (value.file.status && value.file.status === 'uploading') {
                callback()
              } else{
                callback('文件信息有误,请删除后上传正确文件')
              }
            } else callback('请选择文件上传')
          } }]}
        >
          <Upload {...uploadprops}>
            <Button>
              <UploadOutlined /> 点击上传
            </Button>
          </Upload>
        </FormItem>
      </>
)
  }
  const handleConfirm = async() =>{
    const fieldsValue =await form.validateFields()
    //console.log(fieldsValue)
onConfirm(fieldsValue)
  }

  return(
    <Modal
      destroyOnClose
      title='上传模板'visible={modalVisible}
      onOk={() =>handleConfirm()}
      maskClosable={false}
      onCancel={() =>onCancel()}
    >
      <Form
        {...formLayout}
        form={form}
        initialValues={{}}
      >{renderContent()}
      </Form>
    </Modal>
)
}

export default UploadForm

 <FormItem
          name='uploads'label='上传模板'required
          rules={[{ validator: (rule, value, callback) =>{
            if (value && value.fileList &&value.fileList.length) {
              console.log(77, value)
              if (value.file.response && value.file.response.responseCode === '000000') {
                callback()
              } else if (value.file.status && value.file.status === 'uploading') {
                callback()
              } else{
                callback('文件信息有误,请删除后上传正确文件')
              }
            } else callback('请选择文件上传')
          } }]}
        >
          <>
            <Upload {...uploadprops} showUploadList={false}>
              <Button>
                <UploadOutlined /> 点击上传
              </Button>
            </Upload>
            {bussinessFileList.length ? <ul>     // 大概的就是这样,具体样式自己要调整一下{bussinessFileList.map(item => <li key={item.uid}>{item.name}
              </li>)}
            </ul> : null}
          </>
        </FormItem>