как мне отправить FormData на сервер узла из post-запроса React js axios?

#javascript #node.js #reactjs #mongodb #express

#javascript #node.js #reactjs #mongodb #экспресс

Вопрос:

Я пытаюсь отправить данные формы на сервер узла, данные отображаются во время запроса в полезной нагрузке сети, но не доходят до сервера узла. Файл инициатора запроса.

 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}`));
 

routes/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;
 

controllers/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
 

введите описание изображения здесь

смотрите, как данные отображаются в полезной нагрузке сети.

кто-нибудь может мне помочь??

Ответ №1:

Попробуйте добавить тип содержимого в заголовки в axios.post.

 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 .

Комментарии:

1. Я добавил оба, как вы предложили, но не повезло получить пустой объект.

2. @ShivShankarPrasad у вас есть какое-либо решение. Теперь я в той же лодке. на стороне узла пусто, я попробовал log req. тело пустое. Спасибо

3. Привет, Марк. Вы решили свою проблему? У меня это есть прямо сейчас…

4. Привет, Мустафа, ты можешь это решить? Столкнувшись с той же проблемой

Ответ №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