如何从 React js axios 发布请求将 FormData 发送到节点服务器？

Question

我正在尝试将表单数据发送到节点服务器，数据在请求时显示在网络有效负载中，但未到达节点服务器。 请求启动器文件。

let formData = new FormData();

         // formData.append('test', 'hello');
         formData.append('productImage', productImage);
         // console.log(productName);
         formData.append('productName', productName);
         formData.append('productDesc', productDesc);
         formData.append('productPrice', productPrice);
         formData.append('productCategory', productCategory);
         formData.append('productQty', productQty);
         // var options = { content: formData };

         console.log(formData.entries());

         createProduct(formData)
            .then((response) => {
               console.log('server response = ', response);
            })
            .catch((err) => {
               console.log('Error Occurred ', err);
            });
      }

product.js 文件

import axios from 'axios';

export const createProduct = async (formData) => {
   console.log(formData);
   const response = await axios.post('/api/products/', formData);

   return response;
};

server.js 文件

const express = require('express');
const app = express();
const cors = require('cors');
const morgan = require('morgan');
const cookieParser = require('cookie-parser');
const connectDB = require('./database/db');

const authRoutes = require('./routes/auth');
const categoryRoutes = require('./routes/category');
const productRoutes = require('./routes/products');

app.use(cors());
app.use(morgan('dev'));
app.use(express.json());
app.use(cookieParser());
// app.use(express.json());

app.use('/api/auth', authRoutes);
app.use('/api/category', categoryRoutes);
app.use('/api/products', productRoutes);

connectDB();

const port = process.env.PORT || 5000;

app.listen(port, () => console.log(`listening to port ${port}`));

路线/products.js

const express = require('express');
const router = express.Router();
const productsController = require('../controllers/products');
const { authenticateJWT } = require('../middleware/authenticator');

router.post('/', authenticateJWT, productsController.create);
// router.get('/', authenticateJWT, categoryController.readAll);

module.exports = router;

控制器/products.js

const Products = require('../models/Products');

exports.create = async (req, res) => {
   // const { product } = req.file;

   console.log(req.body);

   try {
      // const categoryExists = await Category.findOne({ category });
      // let newProduct = new Products();
      //   newProduct.product_name = ;
      // newProduct = await newProduct.save();
      res.status(200).json({
         successMessage: '  was created',
      });
   } catch (err) {
      console.log('Category create error', err);
      return res.status(500).json({
         errorMessage: 'Please try again later',
      });
   }
};

打印req.body时在控制台中显示空对象。

GET /api/category/ 304 2935.667 ms - -
[0] {}
[0] POST /api/products/ 200 4.827 ms - 34

查看网络负载显示的数据。

谁能帮帮我？？

Answer 1

尝试在 axios.post 上的 headers 中添加内容类型。

export const createProduct = (formData) => {
  return axios({
    method: 'post',
    url: '/api/products/',
    data: formData,
    headers: { 'Content-Type': 'multipart/form-data' }
  });
};

也在服务器端使用bodyParser.urlencoded() 中间件。

const bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({ extended: true }));

您将从req.body 获取数据。

Answer 2

尝试更改
headers: { 'Content-Type': 'multipart/form-data' }
致
headers: { 'Content-Type': 'application/json' }
并添加以下行

app.use(bodyParser.urlencoded({ extended: true })); //this line is already mentioned above
app.use(bodyParser.json());//add this line