带有 formData 的 axios.post 总是返回空

Posted 2023-03-28

【中文标题】带有 formData 的 axios.post 总是返回空

【英文标题】：axios.post with formData always return empty

【发布时间】：2021-12-21 03:13:16

【问题描述】：

问题

对象

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

等待帮助谢谢

【参考方案1】：

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

【讨论】：

我试过了，但它仍然返回相同的空对象，谢谢您的评论:)

【参考方案2】：

1。用邮递员测试

---

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

我发现了

使用form-data 发布数据返回空

但是

使用x-www-form-urlencoded 发布数据返回我所期望的 email : "[e-mail] "

问题是在后端（Nest.js）中接收表单数据的方式

2。使用 UseInterceptors

---

我在nest.js 中添加代码

...

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

我希望 React 应用程序中的 content-type 是默认的（x-www-form-urlendcoed）还是 multipart/form-data，效果很好

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

谁能解释一下原因？