如何将ant design(typescript)中的info.fileList[0].originFileObj和表单数据发送到服务器?

问题描述 投票:0回答:1

我需要将表单数据发送到服务器,但我有类型错误,而且表单日期为空!!!!

enter image description here

    export interface RcFile extends File {
      uid: string;
      readonly lastModifiedDate: Date;
      readonly webkitRelativePath: string;
    }

    interface File extends Blob {
      readonly lastModified: number;
      readonly name: string;
    }

    interface Blob {
      readonly size: number;
      readonly type: string;
      arrayBuffer(): Promise<ArrayBuffer>;
      slice(start?: number, end?: number, contentType?: string): Blob;
      stream(): ReadableStream;
      text(): Promise<string>;
    }

    export interface UploadChangeParam<T extends object = UploadFile> {
      file: T;
      fileList: Array<UploadFile>;
      event?: {
          percent: number;
      };
    }
    export const FileUpload: React.FunctionComponent<{}> = () => {
      const [defaultFileList, setDefaultFileList] = useState<Array<UploadFile>>([])

      const handleOnChange = (info: UploadChangeParam) => {
        setDefaultFileList(info.fileList)
        const finalData = info.fileList[0].originFileObj
        const formData = new FormData()
        formData.append(name, finalData)
        console.log('formData', formData)
      }



      useEffect(() => { console.log('useEffectFileUpload') }, [])

      return (
        <div className="upload-file">
          <Upload onChange={handleOnChange}>
            {defaultFileList.length >= 1 ? null : (
              <Row>
                <Text.Small>  Upload File</Text.Small>
                <Button colour="white" icon={'upload'}> Select file</Button>
              </Row>
            )}
          </Upload>
        </div>
      )
    }
    export default FileUpload

我要发送文件上传日期(在 ant design 和 typescript 中),我遇到了错误

    The argument of type 'File | Blob | undefined' is not assignable to parameter of type 'string | Blob'.
      Type 'undefined' is not assignable to type 'string | Blob'.ts(2345)

我的问题是如何发送我需要支持 ant design 和 typescript 支持的 formdate 在此输入图片描述

typescript file-upload react-hooks antd
1个回答
2
投票

我使用了稍微不同的方法(使用表单),但是将 originFileObj 转换为 blobl 对我来说成功了

formData.append('file', fileList[0].originFileObj as Blob);
© www.soinside.com 2019 - 2024. All rights reserved.