将 formData 从 React 导出到 Spring 引导后端

Question

用于构建 jsonBlob 对象的 React 代码

function  jsonBlob(obj) {
  return new Blob([JSON.stringify(obj)], {
    type: "application/json",
  });
}

 exportFTP = () => {
    const formData = new FormData();
    formData.append("file", jsonBlob(this.state.ipData));
    alert("Logs export to FTP server")

    axios({
      method: "post",
      url: "http://localhost:8080/api/auth/uploadfiles",
      data: formData,
      headers: {
        Accept: "application/json ,text/plain, */*",
        "Content-Type": "multipart/form-data",
      },
    });
  };

Spring 接受前端请求的引导后端

public class UploadFile {
    @Autowired
    private FTPClient con;

    @PostMapping("/api/auth/uploadfiles")
    public String handleFileUpload(@RequestParam("file") MultipartFile file) {

        try {
            boolean result = con.storeFile(file.getOriginalFilename(), file.getInputStream());
            System.out.println(result);

        } catch (Exception e) {
            System.out.println("File store failed");
        }

        return "redirect:/";
    }

我想弄清楚当我从前端调用该函数时它工作正常但是我改变了它的状态不发送 当文件出现在目录中时将对象发送到后端。如果我删除该文件，则仅再次发送它并将其保存在目录中。 我如何保存多个文件而不删除以前的文件

非常感谢您的时间和精力。

Answer 1

"Content-Type": "multipart/form-data",

不要在发布 FormData 时自行设置 Content-Type。 Content-Type 需要包含由 FormData
生成的边界值（示例：multipart/form-data; boundary=----WebKitFormBoundaryzCZHB3yKO1NSWzsn）。它会在发布 FormData 实例时自动插入，因此请将此 header 保留在外。

当您将 blob 附加到表单数据时，它会将文件名默认为 "blob"

在后端，您似乎一直在覆盖文件：

con.storeFile(file.getOriginalFilename(), file.getInputStream());

如果要保留所有文件，请生成一个新的 unik 名称

的主题，但为什么不使用 fetch api？占地面积更小。不需要孔库...

fetch('http://localhost:8080/api/auth/uploadfiles', {
  method: 'POST',
  body: formData,
  headers: {
    Accept: 'application/json ,text/plain, */*'
  }
})

Answer 2

在 React 应用程序中，我使用道具从不同的状态传递文件名并确保删除，

"Content-Type": "multipart/form-data",

React 中的主要函数，

 exportFTP = ({props from different state}) => {
    const formData = new FormData();
    formData.append("file", jsonBlob(this.state.ipData),{You can use this parm for pass name});
    alert("Logs export to FTP server")

    axios({
      method: "post",
      url: "http://localhost:8080/api/auth/uploadfiles",
      data: formData,
      headers: {
        Accept: "application/json ,text/plain, */*"
 
      },
    });
  };

我使用相同的后端代码来获取原始名称，然后它以正确的名称出现。

con.storeFile(file.getOriginalFilename(), file.getInputStream());

干杯!!

将 formData 从 React 导出到 Spring 引导后端

Exporting formData from React to Spring boot backend

javascript

multipartform-data

reactjs