FormData 对象来实现文件上传的功能

1.封装request

importExcel(params: any): AxiosPromise<CustomResponseType<CustomResponseType<any>>> {
        let formData = new FormData()
        formData.append("files", params.file)
        return request.post("/company/importExcel", formData, {
            headers: { "content-type": "multipart/form-data" }
        });
},
      

2.封装请求

const importExcel = useRequest(EnterpriseManageApi.importExcel, {
        loadingDelay: 200,
        manual: true,
        onSuccess({ data }: CustomResponseType<any>, parameter: any) {
            if (data.code === code.SUCCESS) {
                message.destroy();
                message.success('上传成功');
                setImportModelVisible(false);
                setFileInfo(undefined);
                importForm.resetFields()
                onReset()
            } else {
                message.destroy();
                message.error(data.msg)
                console.log("data.msg",data.msg);
            }
        },
        onError(err: any) {
            message.destroy();
            message.error(err.msg)
            console.log("err.msg",err);
        }
    })

3.获取file文件

const [fileInfo, setFileInfo] = useState<any>(undefined);

const draggerProps: any = {
        // multiple:true,
        maxCount: 1,
        accept: "application/vnd.ms-excel",
        customRequest(params: any) {
            const { onSuccess, onError, file, onProgress } = params;
            console.log("file", file);
            if (file.type !== "application/vnd.ms-excel") return message.error("需要上传 
         excel的文件格式");
            setFileInfo(file);
            onSuccess(file);
        },
        onRemove(e: any) {
            setFileInfo(undefined);
            return true;
        }
};



<Form
   form={importForm}
   onFinish={handleImportFinish}
   disabled={false}
   >
    <Form.Item
       name="lawsFile"
       label="附件"
       valuePropName="fileList"
       getValueFromEvent={normFile}
       rules={[{
       required: true, message: "请上传文件",
       validator: (rule, value) => {
       if (fileInfo) {
          return Promise.resolve()
       } else {
          return Promise.reject('1111111')
         }
       }
       }]}
    >
      <Dragger {...draggerProps}>
          <p className="ant-upload-drag-icon">
               <InboxOutlined />
           </p>
           <p className=" my-upload-text-title">
                将文件拖到此区域，或<span>点击上传</span>
           </p>
           <p className=" my-upload-text-brief">每个文件大小不能超过3M </p>
      </Dragger>
    </Form.Item>
</Form>

4.发送请求

const handleImportFinish = () => {
        importExcel.run({ file: fileInfo })
    }