如何將表單數據從 React 發送到 Node JS 后端服務器

Question

我正在嘗試將 FormData 從 React JS 發送到后端（快速節點服務器），如下所示。

我看到req.body.myFormData (expressTest.js)的空值。 我也嘗試了這篇文章的建議，但沒有運氣。 任何幫助表示贊賞。

如何從 React js axios 發布請求將 FormData 發送到節點服務器？

reactTest.js 模塊

myFormData = new FormData();
myFormData.append("userName","TestUser")
myFormData.append("files", file) // input type file
export const sendDocument = async (myFormData) => {
  return await axios({
    method: 'post',
    url: `/sendDocument`,
    data: myFormData,
    headers: { 'Content-Type': 'multipart/form-data' }
  });
};

expressTest.js

const express = require('express')
const axios = require('axios')
const router = express.Router()

router.post('/', (req, res) => {
  console.log(req.body.myFormData) //giving undefined //tried req.myFormData too
  console.log(JSON.parse(req.body.myFormData.userName))
  axios({
    method: 'post',
    url: '/sendMyUserData',
    data: req.body.myFormData,
    headers: {
      apiKey: 'keytoapi',
      'Content-Type': 'multipart/form-data'
    }
  })
    .then(response => {
      
      return res.send(res)
    })
    .catch(error => {
      console.error('error')
     }

添加 @con-fused 和multer推薦的 multer 后，我可以在 Express 路由器中讀取 FormData。

下面是 output。

console.log(req.body)

[Object: null prototype] {
  files: '[object File]',
  userName: 'TestUser'
}

現在我需要將此發送到我的后端 Java 端點 - 我發送正確的正文嗎？ 它沒有達到我的終點

@PostMapping(path = "/sendMyUserData", consumes = { MediaType.MULTIPART_FORM_DATA_VALUE })
        public String uploadMyUserData(@RequestPart(value = "files") final MultipartFile[] multipartFiles, @RequestPart(value = "userName", required = true) String userName ) {
            return myService.storeFiles(multipartFiles, userName));
    }

Answer 1

您需要 multer 來獲取多部分/表單數據。

npm i multer

formdataParser = require('multer')().fields([])
app.use(formdataParser)
 

根據更新

https://github.com/expressjs/body-parser/issues/88#issuecomment-173644716評論