如何将表单数据从 React 发送到 Node JS 后端服务器

Posted 2023-03-28

【中文标题】如何将表单数据从 React 发送到 Node JS 后端服务器

【英文标题】：How to send form data from React to the Node JS back end server

【发布时间】：2021-05-01 20:42:37

【问题描述】：

我正在尝试将 FormData 从 React JS 发送到后端（快速节点服务器），如下所示。

我看到req.body.myFormData (expressTest.js) 的值为空。 我也尝试了这篇文章的建议，但没有运气。任何帮助表示赞赏。

how do i send FormData to the node server from React js axios post request?

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 和@Kidas 推荐的multer 后，我可以在Express 路由器中读取FormData。

下面是输出。

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

【问题讨论】：

你试过console.log(req.body)，看看你得到了什么？

是的，它打印的是空的

不。我试过那些。我也试过JSON.Stringify，如果不知道请不要标记为重复

【参考方案1】：

你需要 multer 来获取 multipart/form-data。

npm i multer

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

根据

更新

https://github.com/expressjs/body-parser/issues/88#issuecomment-173644716评论

【讨论】：

是的，我的配置中已经有这两个 app.use(bodyParser.json()) app.use(bodyParser.urlencoded( extended: true ));

看起来是 expressJs 的问题。尝试使用此帮助：github.com/expressjs/body-parser/issues/…

谢谢，@con-fused，它现在可以工作了。我刚刚更新了帖子。我正在尝试查看如何将带有元数据的文件发送到后端

我将您的答案标记为正确，但它并没有解决我在新问题中发布的实际问题。你能帮我看看吗。***.com/questions/65941537/…