帶有 formData 的 axios.post 總是返回空

Question

問題

帶有 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))

等待一些幫助謝謝

Answer 1

嘗試添加{headers: { "Content-Type": "multipart/form-data" }}作為axios.post()調用的第三個參數。

Answer 2

1. 用郵遞員測試

---

有很多身體類型，比如form-data ， x-www-form-urlencoded ..

我找到

• 使用form-data發布數據返回空{}

但

• 使用x-www-form-urlencoded發布數據返回我所期望的{ email : "aa@google.com "}

問題是在后端接收表單數據的方式（Nest.js）

2.使用UseInterceptors

---

我在 nest.js 中添加代碼，例如

...

@Post()
  @UseInterceptors(FileInterceptor('file')) // <-- this
createUser(@Body body: any) {
...

它運行良好，我預計React 應用程序中的內容類型是默認值（ x-www-form-urlendcoed ）還是multipart/form-data

我無法完全解釋為什么會發生這種情況並起作用。

有人可以解釋為什么嗎？