如何在 React 中发送包含 json 和文件的 FormData？-解网

问：

我在前端使用 React，在后端使用 Spring boot。我正在尝试使用 React 中的 FormData 发送一个包含图像以及一些 json 数据的请求。

这是我当前在前端的代码：

const submitForm = (e: any) => {
    e.preventDefault();

   const swimArea = "{\"swimArea\" : {\"name\": \"aTESTTEST\", \"longitude\": \"15.47\",    \"latitude\": \"56.25\"}}";
   const formData = new FormData();
   formData.append('swimArea', JSON.stringify(swimArea));
   formData.append("file", e.target.file);

   const requestOptions = {
      method: "POST",
      headers: {
         "Content-Type": `multipart/form-data; boundary=----somefixedboundary`,
         "Access-Control-Allow-Origin": "*",
         "Access-Control-Allow-Methods": "DELETE, POST, GET, OPTIONS",
         "Access-Control-Allow-Headers": "Content-Type, Authorization, X-Requested-With",
      },
      body: formData,
   };
   fetch(
      "http://localhost:8080/api/v1/bathplace/newBathingPlace",
      requestOptions
   )
      .then((response) => response.json())
      .then((data) => {  // Continue with the data...
      });
};

Spring API 是这样的：

@PostMapping(value = "/newBathingPlace")
public ResponseObject addBathingPlace(@RequestPart AddBathingPlaceRequest swimArea, @RequestPart MultipartFile file) {
   // Handling the request...
   return new ResponseObject();
}

我已经用 Postman 测试了 API，它可以工作： Postman 中的 FormData Postman 中 FormData 的请求标头

现在来谈谈问题，在浏览器中出现以下错误：“message”： “Required request part 'swimArea' is not present”

我相信 react-code 缺少或错误，但不确定是什么。如果你知道什么，请给我指出正确的方向。我尝试从服务器和客户端中删除文件实现。出现同样的错误。

reactjs spring-boot http postman multipartform-data

const submitForm = (e) => {
    e.preventDefault();

    const swimArea = {
        swimArea: {
            name: "aTESTTEST",
            longitude: "15.47",
            latitude: "56.25"
        }
    };

    const formData = new FormData();
    formData.append('swimArea', JSON.stringify(swimArea));
    formData.append('file', e.target.files[0])

   const requestOptions = {
      method: "POST",
      headers: {
         "Content-Type": `multipart/form-data; boundary=----somefixedboundary`,
         "Access-Control-Allow-Origin": "*",
         "Access-Control-Allow-Methods": "DELETE, POST, GET, OPTIONS",
         "Access-Control-Allow-Headers": "Content-Type, Authorization, X-Requested-With",
      },
      body: formData,
   };
   fetch(
      "http://localhost:8080/api/v1/bathplace/newBathingPlace",
      requestOptions
   )
      .then((response) => response.json())
      .then((data) => {  // Continue with the data...
      });
};

也。使用时，浏览器会自动将设置为具有正确边界的 to。手动设置此标头可能会导致问题。FormDataContent-Typemultipart/form-data

0赞 Tronjesson 11/15/2023 #3

我终于上班了......我已经在这个问题上坚持了几个星期，在我在这里发布问题几个小时后，我解决了它，唉。

问题是我如何创建formdata，这是该部分的新代码：

const formData = new FormData();
const blob = new Blob([e.target.file.files[0]], { type: 'application/octet-stream' });
formData.append('swimArea', new Blob([JSON.stringify(swimArea)], { type: "application/json" }));
formData.append("file", blob);

上一个：RTK查询上传多部分数据的图像在前端不起作用

下一个：java.util.zip.DataFormatException：无效的存储块长度

如何在 React 中发送包含 json 和文件的 FormData？

How to send FormData containing json and file in React?

评论

评论