問題
帶有 formData 的 axios.post 總是回傳空物件 {}
反應應用程式代碼
const UserSignup = () => {
const signupUser = async (event) => {
try {
event.preventDefault();
const formData = new FormData(document.getElementById('signupForm'));
const res = await axios.post(
`${process.env.REACT_APP_BACKEND}/users/signup`,
formData
);
console.log(res.data);
} catch (error) {
console.log(error);
}
};
return (
<Container>
<h1>signup form</h1>
<form onSubmit={signupUser} id="signupForm">
email : <HTextInput name="email" />
password :
<HTextInput name="password" type="password" />
passwordCheck :
<HTextInput name="passwordCheck" type="password" />
<Button type="submit">signup</Button>
</form>
</Container>
);
};
我檢查了..
- formData 鍵值是否存盤？
是的。我通過添加一些代碼來檢查鍵值，例如
...
const formData = new FormData(document.getElementById('signupForm'));
// FormData key
for (let key of formData.keys()) {
console.log(key);
}
// FormData value
for (let value of formData.values()) {
console.log(value);
}
const res = await axios.post(
`${process.env.REACT_APP_BACKEND}/users/signup`,
formData
);
...
在瀏覽器控制臺中列印的鍵值
- 后端（Nest.js）運行良好嗎？
是的。我與郵遞員核對過，它作業得很好
郵遞員截圖
后端回應(console.log(body))
等待一些幫助謝謝
uj5u.com熱心網友回復：
嘗試將{headers: { "Content-Type": "multipart/form-data" }}第三個引數添加到您的axios.post()呼叫中。
uj5u.com熱心網友回復：
1. 用郵遞員測驗
有很多體型，比如form-data，x-www-form-urlencoded..
我找到
- 發布
form-data回傳空的資料{}
但
- 發布資料并
x-www-form-urlencoded回傳我期望的樣子{ email : "[email protected] "}
問題是在后端接收表單資料的方式（Nest.js）
2.使用UseInterceptors
我在 nest.js 中添加代碼，例如
...
@Post()
@UseInterceptors(FileInterceptor('file')) // <-- this
createUser(@Body body: any) {
...
它作業得很好，我希望內容型別是 default( x-www-form-urlendcoed) 還是multipart/form-data在React 應用程式中
我無法完全解釋為什么會發生這種情況并起作用。
有人可以解釋為什么嗎？
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/358508.html
標籤：javascript 反应 邮政 公理 表单数据
上一篇：使用QT發布表單