我的项目包括前端的React Js，后端的Node Js和作为DB的MySQL。
我试图将数据从前端推送到后端，后端没有阅读任何formdata值，也没有接收文件。下面是我的前端和后端代码。我没有看到任何不正确的配置。但我可能忽略了一些东西。任何建议都很感激。
React Js

import React, { useState, useEffect } from 'react';
import './NewsAndFlyerUploadFlyers.css';
//Components
import Header from '../../Components/Header/Header';
import Footer from '../../Components/Footer/Footer';
//Repositories
import Axios from 'axios';
import { useNavigate } from 'react-router-dom';

const NewsAndFlyerUploadFlyers = () => {
    const [flyerName, setFullName] = useState(null);
    const [flyerEventDate, setFlyerEventDate] = useState(null);
    const [flyerDescription, setFlyerDescription] = useState(null);
    const [selectedFile, setSelectedFile] = useState(null);
    const [statusMessage, setStatusMessage] = useState(null);
    const [isLoading, setIsLoading] = useState(false);
    const Navigate = useNavigate();

    const submitForm = () => {
        setIsLoading(true);
        const url = 'http://localhost:3001/Flyer/Flyer_Upload';
        
        const data = new FormData();
        data.append('flyerName', flyerName);
        data.append('flyerEventDate', flyerEventDate);
        data.append('flyerDescription', flyerDescription);
        for (var x = 0; x < selectedFile.length; x++){
            data.append('files', selectedFile[x]);
        }
        
        Axios.post(url, data)
        .then((response) => { 
            if (response.data.status == 500){
                setStatusMessage(response.data.message);
            }
            else if (response.data.message == 'All fields must be filled out...'){
                setStatusMessage(response.data.message);
            }
            else {
                Navigate('/NewsAndFlyers');
            }
        });
        setIsLoading(false);
    };

    return (
        <>
            <Header/>
            <div className='newsAndFlyersUploadFlyersBody'>
                <h1>Upload A Flyers</h1>
                <div className='flyerInfoFormBody'>
                <p className='flyerName'>*Event Name: <input name='flyerName' placeholder='Event Name' required autoComplete="off" onChange={(e) => setFullName(e.target.value)} /></p>
                <p className='flyerEventDate'>*Event Date: <input name='flyerEventDate' placeholder='Event Date' required autoComplete="off" onChange={(e) => setFlyerEventDate(e.target.value)} /></p>
                <p className='flyerDescription'>*Flyer Description: <textarea name='flyerDescription' placeholder='Flyer Description' required autoComplete="off" onChange={(e) => setFlyerDescription(e.target.value)} /> </p>
                <p>*Upload the flyer.</p>
                <input className='uploadFiles' type='file' name='file' required onChange={(e) => setSelectedFile(e.target.files)} /></div>
                <button className='uploadButton' onClick={submitForm}>Upload Flyer</button>
                <h2>{statusMessage}</h2>
            </div>
            <Footer/>
        </>
    );
}

export default NewsAndFlyerUploadFlyers;

节点Js

const express = require('express');
const router = express.Router();
const db = require('../config/db');
const session = require('express-session');
const bodyParser = require('body-parser');
const app = express();
const SqlDbStore = require('express-mysql-session')(session);
const cookieParser = require('cookie-parser');
const multer = require('multer');
const path = require('path');
//----------------------------------------- BEGINNING OF PASSPORT MIDDLEWARE AND SETUP ---------------------------------------------------
app.use(cookieParser());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(session({
    key: 'session_cookie_name',
    secret: 'session_cookie_secret',
    store: new SqlDbStore({
    host: 'localhost',
    port: 3306,
    user: 'root',
    password: 'xxxxxx',
    database: 'xxxxxx',
    }),
    resave: false,
    saveUninitialized: false,
    cookie:{
        maxAge:1000*60*60*24,
        secure: false
    }
}));
const multerFlyerDestination = './routes/Flyers';
const flyerStorage = multer.diskStorage({
  destination: function (req, files, cb){ 
    return cb(null, multerFlyerDestination)
  },
  filename: function (req, file, cb){
    return cb(null, file.fieldname);
  } 
});
const uploadFlyer = multer({ storage: flyerStorage }).single('file');
//----------------------------------------- END OF PASSPORT MIDDLEWARE AND SETUP ---------------------------------------------------
router.post('/Flyer_Upload', (req, res) => {
  const flyerName = req.body.flyerName;
  const flyerEventDate = req.body.flyerEventDate;
  const flyerDescription = req.body.flyerDescription;
  const flyerID = Math.floor(Math.random()*90000) + 10000;

  console.log('\nflyerName: ' + flyerName);
  console.log('\nflyerEventDate: ' + flyerEventDate);
  console.log('\nflyerDescription: ' + flyerDescription);
  console.log('\nflyerID: ' + flyerID);

  uploadFlyer(req, res, function (err) {
    if (err instanceof multer.MulterError) {
        return res.status(500).json(err)
    } else if (err) {
        return res.status(500).json(err)
    }

    const directory = path.dirname(req.path);
    console.log('File path: ' + directory);
    return res.status(200).send(req.files);
  });
});

module.exports = router;