【发布时间】：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，如果不知道请不要标记为重复
标签： javascript node.js reactjs express axios