如何在React中使用带有表单数据的获取来发布对象？

Question

我想将文件发送到我的Express应用作为后端。 我的问题是我的身体以application/json类型发送，我想以form-data ，然后使用multer > https://github.com/expressjs/multer上载此文件

我不知道如何准备获取呼叫以稍后在快递中获取。

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

当我想在api断点中记录req.file ，我变得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'
}

Answer 1

您需要使用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
});