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

我想将文件作为后端发送到我的express应用程序。我的问题是我的正文是以类型

application/json

发送的，我想以

formdata

的形式发送，然后使用

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

时，我得到了

未定义的

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

我使用钩子存储表单中的react数据，该对象如下所示：

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

您需要使用构建请求主体

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

您需要使用构建请求主体

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

是的，我忘记了文件输入类型的行为有点不同。您必须参考元素文件[0]。我纠正了我的示例，使其正常工作。我的荣幸是：o）req.file仍然发送未定义的文件是的，我忘记了文件输入类型的行为有点不同。您必须参考元素文件[0]。我纠正了我的例子，使其有效。我的荣幸：o）
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
});