时间戳

首页 > 解决方案 > 如何在 React 中使用 fetch 和表单数据发布对象？

javascript - 如何在 React 中使用 fetch 和表单数据发布对象？

问题描述

我想将文件作为后端发送到我的快速应用程序。我的问题是我的身体是作为类型发送的application/json，我想把它作为一个发送，然后使用-> https://github.com/expressjs/multerform-data上传这个文件multer

我不知道如何准备 fetch 调用以便稍后在 express 中获取它。

    fetch('/api/data', {
  method: 'POST',
  headers: {
    Accept: 'application/form-data',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(data),
})
  .then((resp) => resp.json())
  .then((data) => console.log(data));

当我想登录req.fileapi 断点时，我得到undefined.

app.post('/api/data', upload.single('cv'), (req, res) => {
  console.log(req.body);
  console.log(req.file);
  res.send({ name: 'Hello world!' });
});

我使用钩子存储来自表单的反应数据，这个对象看起来像这样：

{
   name: 'test',
   surname: 'test2',
   cv: 'C:\\fakepath\\Babel error.png'
}

标签： javascripthtmlnode.jsreactjsexpress

解决方案

您需要使用FormData API构建您的请求正文。

FormData 接口提供了一种方法来轻松构造一组表示表单字段及其值的键/值对，然后可以使用 XMLHttpRequest.send() 方法轻松发送。如果编码类型设置为“multipart/form-data”，它使用与表单相同的格式。

const myFile = document.querySelector("input[type=file]").files[0];
const data = new FormData();
data.append("myFile", myFile);
data.append("otherStuff", "stuff from a text input");
fetch(target, {
    method: "POST",
    body: data
});

推荐阅读