Node.js REST 端点未捕获从 axios 请求传递的参数答案

【问题标题】：Node.js REST endpoint not catching parameters passed from axios requestNode.js REST 端点未捕获从 axios 请求传递的参数
【发布时间】：2020-08-24 17:27:50
【问题描述】：

我正在使用 axios 从 React 前端向端点发出 POST 请求，以将一些数据保存到我的数据库 (MongoDB)。我收到一个错误，即 无法读取未定义的属性“名称”。我认为这是因为 req.body 未定义，但我不明白我的 axios 请求有什么问题。我记录了所有参数并且它们在那里（不是未定义的）。 axios 请求和端点写在下面。任何帮助将不胜感激。谢谢！

Axios 请求

const uploadElement = async (name, HTMLCode, JSCode, CSSCode, screenshot) => {
console.log(name)
  try {

    await axios({
      method: 'post',
      url: '/api/elements',
      data: {
        name: name,
        HTMLCode,
        JSCode,
        CSSCode,
        screenshot
      }
    });
  } catch (e) {
      console.log(e);
  }
}

POST 请求的端点

router.post("/", upload.single("screenshot"), async (req, res) => {
  try {
    const newElement = new Element({
      name: req.body.name,
      JSCode: req.body.JSCode,
      HTMLCode: req.body.HTMLCode,
      CSSCode: req.body.CSSCode,
      screenshot: req.file.buffer,
    });

    await newElement.save();
    res.send("Data uploaded successfully!");
  } catch (e) {
    console.error(e);
  }
});

Server.js

const express = require("express");
const passport = require("passport");
const session = require("express-session");
const cors = require('cors');

const elementRouter = require("./routes/elementRoute");
const authRouter = require("./routes/authRoute");

const connectDB = require("./config/db");

const app = express();

const port = process.env.PORT || 5000;
connectDB();

app.use(
  session({
    secret: "googleOAuth",
    resave: false,
    saveUninitialized: true,
  })
);

app.use(cors());

// Passport Config
require("./config/passport")(passport);
app.use(passport.initialize());
app.use(passport.session());

app.use("/api/elements", elementRouter);
app.use("/api/auth", authRouter);

app.listen(port, () => {
  console.log(`Server is up on port ${port}`);
});

【问题讨论】：

你能显示你的服务器端index.js或server.js
@ShmiliBreuer 已添加到问题中。
@ShmiliBreuer 它适用于所有文本字段，但不适用于图像。你能告诉我如何解析吗？
您能解释一下您要对后端文件执行什么操作吗？前端的文件格式是什么？
文件是前端jpeg/png格式的图片。它实际上是组件的屏幕截图。我知道将它保存在数据库中不是一个好习惯，但由于某种原因我必须这样做

标签： javascript node.js reactjs http axios

【解决方案1】：

您需要在服务器端代码中安装并要求 body-parser

首次运行npm i --save body-parser

然后像这样要求它

const bodyParser = require("body-parser");

然后在你声明你的应用后使用它（在这行const app = express();之后）

app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

这使您的请求数据在req.body中可用

【讨论】：