使用 Dropzone 向 MongoDB 添加数据，得到空体

Question

我正在尝试添加一个基于excel数据生成的对象，问题是当你点击发送数据的按钮时，Payload收到了这个数据，但是后端仍然是一个空体。

这是函数本身，它将数据发送到后端：

const handleUploadBases = async (arg_bases) => {
    const mapped = arg_bases.map((item) => 
        item.reduce((acc, value, idx) => ({...acc, [row[idx]]: value }), {})
    )

    await fetch(
        "http://localhost:5001/management/perfomance",
        {
            headers: { Authorization: `Bearer ${token}`},
            method: "POST",
            body: JSON.stringify(mapped),
        }
    );
}

这里是表格本身，我在这里处理excel文件，调用函数提交的按钮也是这个表格：

return (
    <Formik
        onSubmit={() => {}}
        initialValues={initialValuesExcel}
        validationSchema={excelSchema}
    >
        {({
            values, 
            errors,
            touched,
            handleBlur,
            handleChange,
            handleSubmit,
            setFieldValue,
            resetForm,
        }) => (
            <Box height="100%">
                <form onSubmit={handleSubmit} style={{ height: "100%"}}>
                    <Box>
                        <Box>
                            <Typography variant='h5'>ЗАГРУЗИТЕ <strong>ВАШИ БАЗЫ</strong> ЗДЕСЬ</Typography>
                        </Box>
                        <Dropzone 
                            onDrop={handleExcelDrop}
                            multiple={false}
                        >
                            {({ getRootProps, getInputProps }) => (
                            <Box 
                                {...getRootProps({ className: "dropzone" })} 
                                border={`2px dashed ${palette.divider}`}
                                p="4rem"
                                m="1.55rem 1rem"
                                sx={{ "&:hover": { cursor: "pointer" }}}
                                bgcolor={palette.background.default}
                            >
                                <input {...getInputProps()} />
                                {
                                    isDragActive ? 
                                        <Typography>Drop Excel files here...</Typography> : 
                                        <Box textAlign="center">
                                            <Typography sx={{ color: palette.text.disabled}}>Перетяните ваши базы сюда,<br />
                                            или нажмите, чтобы выбрать нужные файлы.</Typography>
                                        </Box>
                                }
                            </Box>
                            )}
                        </Dropzone>
                        <Box>
                            <Typography variant='h5'>EXCEL <strong>ФАЙЛЫ ({fileNames.length})</strong></Typography>
                            <List>
                                {fileNames.map(fileName => (
                                    <ListItem key={fileName}
                                        secondaryAction={
                                            <IconButton edge="end" color='error' onClick={handleRemoveExcel(fileName)}>
                                                <ClearOutlinedIcon />
                                            </IconButton>
                                        }
                                        disablePadding
                                        sx={{ width: "70%"}}
                                    >
                                        <ListItemIcon>
                                            <TextSnippetOutlinedIcon fontSize="large" color='success'/>
                                        </ListItemIcon>
                                        <ListItemText primary={fileName}/>
                                    </ListItem>
                                ))}
                            </List>
                        </Box>
                    </Box>
                    <Button 
                        variant='contained' 
                        type='submit'
                        disabled={fileNames.length === 0 ? true : false}
                        sx={{
                            backgroundColor: palette.text.primary,
                            color: "#000",
                            fontSize: "14px",
                            fontWeight: "bold",
                            padding: "10px 20px"
                        }}
                        startIcon={<CloudUploadOutlinedIcon />}
                        onClick={() => handleUploadBases(bases)}
                    >
                        Загрузить базы
                    </Button>
                </form>
            </Box>

        )}
    </Formik>
)

我还在后端附加了一个函数，提供给后端发送数据，现在我只是想显示body，就在这个阶段是空的

export const addBase = async(req, res) => {
    try {
        console.log("Added")

        console.log(req.body)

        res.status(200).json({message: "Added Successfully"});
    } catch (e) {
        res.status(404).json({ message: e.message })
    }
}

这里是路线：

import express from "express";
import { getAdmins, getUserPerfomance, addBase } from "../controllers/management.js";

const router = express.Router();

router.get("/admins", getAdmins);
router.get("/perfomance/:id", getUserPerfomance);
router.post("/perfomance", addBase);

export default router;

现在我附上结果：当你点击按钮向后端发送数据时会发生什么

下面是截图，其中empty body在Added这个词后显示

我将不胜感激！