axios.post formData 始终 return 为空

Question

问题

axios.post with formData 始终 return 空对象 {}

React 应用代码

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

key-values printed in browser console

后端（Nest.js）工作正常吗？

是的。我和邮递员核对过，它工作得很好

postman screenshot

backend response(console.log(body))

等待帮助谢谢

Answer 1

尝试添加 {headers: { "Content-Type": "multipart/form-data" }} 作为您的 axios.post() 调用的第三个参数。

Answer 2

1。用 postman

测试

有很多 body 类型，例如 form-data、x-www-form-urlencoded..

我发现

post 数据 form-data return 为空 {}

但是

post 数据 x-www-form-urlencoded return 符合我的预期 { email : "aa@google.com "}

问题是后端接收表单数据的方式(Nest.js)

2。使用 UseInterceptors

我在nest.js中添加代码喜欢

...

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

它运行良好我预计 content-type 是默认值（x-www-form-urlendcoed）还是 React 应用程序

中的 multipart/form-data

我无法准确解释为什么会发生这种情况并起作用。

谁能解释为什么？

axios.post formData 始终 return 为空

axios.post with formData always return empty

javascript

post

form-data

reactjs

axios

1。用 postman

2。使用 UseInterceptors