向节点 js 发送发布请求时，我得到一个空对象

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 发送到服务器时，我得到一个空对象

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 对象发送时

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 是一个包含成功控件的表单。可能没问题，但我们看不到，所以我们无法判断。