向節點 js 發送發布請求時，我得到一個空的 object

Question

我的問題是，當我使用 react js axios 向服務器發送請求時，我得到 req.body 為空

index.js

const express = require('express');
const cors = require('cors');
const config = require('config');
const testRoutes = require('./routes/test');

const app = express();
const PORT = config.get('port') || 5000;

app.use(cors());
app.use(express.json({ extended: true }));


app.use('/api/test', testRoutes);

app.listen(PORT, () => console.log(`Сервер запустился на порте ${PORT}`));

表單組件

import React from 'react';
import { Link } from 'react-router-dom'
import './login-page.css';

const LoginPage = (props) => {
    const { phone, password, inputControl, handlerLogin } = props;
    return (
        <div className="login-page">
            <div className="container">
                <div className="row">
                    <div className="col-left col-lg-6">
                        <div className="wrapper-col">
                            <h4>Войти</h4>
                            <div className="separator">
                                <hr />
                                <span>заполните форму</span>
                                <hr />
                            </div>
                            <form onSubmit={handlerLogin}>
                                <div className="mb-3">
                                    <input className="form-control" 
                                    type="text"
                                    name="phone"
                                    placeholder="Телефон"
                                    value={phone}
                                    onChange={inputControl} />
                                </div>
                                <div className="mb-3">
                                    <input className="form-control" 
                                    type="password"
                                    name="password"
                                    placeholder="Пароль" 
                                    value={password}
                                    onChange={inputControl} />
                                </div>
                                <button className="btn btn-lg btn-login mb-2" 
                                type="submit">Войти</button>
                                <Link to="/recovery">Забыли пароль?</Link>
                            </form>
                        </div>
                    </div>
                    <div className="col-right col-lg-6">
                        <div className="wrapper-col">
                            <h4>Нет аккаунта? Присоединяйтесь к нам!</h4>
                            <p>После регистрации у вас будет возможность как выполнять заказы, так и заказывать услуги на Yams.</p>
                            <Link to="/registration" className="btn">Зарегестрироваться</Link>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default LoginPage;

處理程序

當我通過新的 FormData 發送到服務器時，我得到一個空的 object

handlerLogin = (e) => {
        e.preventDefault();
        console.log('handlerLogin()');

        const formData = new FormData(e.target);

        axios.post('http://localhost:5000/api/test/', formData)
    }

文件路徑

const { Router } = require('express');

const router = Router();

router.post('/', (req, res) => {
    console.log(req.body); //req.body -> {}
})

module.exports = router;

處理程序

但是當我從常規 JSON object 發送時

handlerLogin = (e) => {
        e.preventDefault();
        console.log('handlerLogin()');

        axios.post('http://localhost:5000/api/test/', {name: 'test1', surname: 'test2'});
    }

我在服務器上收到發送的數據，正常工作

const { Router } = require('express');

const router = Router();

router.post('/', (req, res) => {
    console.log(req.body); // req.body ---> {name: 'test1', surname: 'test2'}
})

module.exports = router;

幫忙解決一下這個問題，不勝感激，謝謝！

Answer 1

FormData 請求（支持文件上傳）發送多部分格式數據，但您擁有的唯一正文解析中間件是為 JSON 格式數據設置的。

您需要一些可以處理您發送的正文類型的東西。

multer可能是最流行的處理多部分數據的中間件。

---

您還必須確保e.target是一個包含成功控件的表單。 它可能很好，但我們看不到它，所以我們無法判斷。