[英]FormData sent with React.js becomes empty when going to Express.js backend
I was creating a book library management CRUD and I am Using React v18
.我正在创建一个图书库管理 CRUD,我正在使用 React
v18
。 I am struggling to add data to my mongdb atlas because whenever I pass formData
to axios.post
via Redux, I'm always getting empty req.body
on the backend controller.我正在努力将数据添加到我的 mongdb 地图集中,因为每当我通过
formData
将axios.post
传递给 axios.post 时,我总是在后端req.body
上得到空的 req.body。
This however does not occur when I am using postman when adding data to my database via form-data.但是,当我通过表单数据向我的数据库添加数据时使用 postman 时,不会发生这种情况。 My login form which also using
axios.post
works fine and the booklist using axios.get
also works fine, the crud for book is the only one that is not working.我的登录表单也使用
axios.post
可以正常工作,使用axios.get
的书单也可以正常工作,书的杂物是唯一不起作用的。
This is my bookCreate.js
:这是我的
bookCreate.js
:
const BookCreate = () => {
const [title, setTitle] = useState('')
const [responsibility, setResponsibility] = useState('')
const [uniform_title, setUniform_title] = useState('')
const [parallel_title, setParallel_title] = useState('')
const [main_author, setMain_author] = useState('')
const [other_author, setOther_author] = useState('')
const [contributors, setContributors] = useState('')
const [corp_author, setCorp_author] = useState('')
const [placePub, setPlacePub] = useState('')
const [publisher, setPublisher] = useState('')
const [yearPub, setYearPub] = useState('')
...
const submitHandler = (e) => {
e.preventDefault();
const formData = new FormData();
formData.set('title', title);
formData.set('responsibility', responsibility);
formData.set('uniform_title', uniform_title);
formData.set('parallel_title', parallel_title);
formData.set('main_author', main_author);
formData.set('other_author', other_author);
formData.set('contributors', contributors);
formData.set('corp_author', corp_author);
formData.set('placePub', placePub);
formData.set('publisher', publisher);
formData.set('yearPub', yearPub);
dispatch(newBooks(formData))
}
return (
<Fragment>
<MetaData title={'TUP-T Online Library - Admin'} />
{/*<div className="row">*/}
<SideNavbarAdmin/>
<div></div>
<div className="dashboard-content">
<div className="dashboard-page">
<div className="dashboard-header">
<h1>Add Book</h1>
</div>
<div className="dashboard-body">
<form className="" onSubmit={submitHandler} encType='multipart/form-data'>
<div className="row g-3">
<div className="col md-6">
<div className="form-group">
<label htmlFor="title_field">Title</label>
<input
type="text"
id="title_field"
className="form-control"
name='title'
value={title}
onChange={(e) => setTitle(e.target.value)}
/>
</div>
...
}
This is bookAction.js
:这是
bookAction.js
:
export const newBooks = (bookData) => async (dispatch) => {
try {
dispatch({ type: NEW_BOOK_REQUEST })
const config = {
headers: {
"Content-Type": "multipart/form-data"
// "Content-Type": "application/json"
}
}
// for(var pair of bookData.entries()) {
// console.log(pair[0]+ ', '+ pair[1]);
// }
const { data } = await axios.post('/api/v1/book/new', bookData, config)
dispatch({
type: NEW_BOOK_SUCCESS,
payload: data
})
} catch (error) {
dispatch({
type: NEW_BOOK_FAIL,
payload: error.response.data.message
})
}
}
This is bookController.js
:这是
bookController.js
:
exports.createBook = async (req, res, next) => {
console.log(req.body);
}
My app.js
on the backend:我在后端的
app.js
:
const express = require("express");
const app = express();
const cookieParser = require("cookie-parser");
const errorMiddleware = require("./middlewares/errors");
app.use(express.json());
app.use(cookieParser());
app.use(errorMiddleware);
app.use(express.urlencoded({ extended: true }));
const book = require("./routes/book");
const auth = require("./routes/auth");
app.use("/api/v1", book);
app.use("/api/v1", auth);
app.use(errorMiddleware);
module.exports = app;
FormData
send multipart/form-data
, hence the parsers you used in app.js
won't work. FormData
发送multipart/form-data
,因此您在app.js
中使用的解析器将不起作用。 The common and easy way is to use multer
.常见且简单的方法是使用
multer
。 First install it:首先安装它:
npm install --save multer
Then where you hade urlencoded
, and cookieParser
use this:然后你在哪里
urlencoded
和cookieParser
使用这个:
const multer = require('multer');
const upload = multer();
app.use(upload.none())
I'm using this upload.none()
because you seem to be not sending any file.我正在使用这个
upload.none()
因为你似乎没有发送任何文件。 If you are, you can visit the above link, mutter
will let you do that.如果你是,你可以访问上面的链接,
mutter
会让你这样做。
Also you can simplify submitHandler
since each form input
has a name
by getting ride of all those states and simply give the form
to FormData()
as parameter with e.target
:您还可以简化
submitHandler
因为每个表单input
都有一个name
,方法是通过所有这些状态并简单地将form
作为参数提供给FormData()
和e.target
:
const submitHandler = (e) => {
e.preventDefault();
const formData = new FormData(e.target);
dispatch(newBooks(formData));
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.