将 formData 从 React 导出到 Spring Boot 后端答案

【问题标题】：Exporting formData from React to Spring boot backend将 formData 从 React 导出到 Spring Boot 后端
【发布时间】：2023-04-10 21:41:01
【问题描述】：

构建 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 Boot 后端

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:/";
    }

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

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

【问题讨论】：

标签： javascript reactjs multipartform-data

【解决方案1】：

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

发布表单数据时不要自己设置Content-Type。 Content-Type 需要包含由 FormData
生成的边界值（例如：multipart/form-data; boundary=----WebKitFormBoundaryzCZHB3yKO1NSWzsn）。它会在发布 FormData 实例时自动插入，因此请忽略此标头。

当您将 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, */*'
  }
})

【讨论】：

非常感谢您抽出宝贵的时间@Endless for this con.storeFile(file.getOriginalFilename(), file.getInputStream());我无法正确理解做出改变，因为我是这里的初学者。我尝试使用字符串而不是 file.getoriginalfilename() 但它不起作用
我使用了布尔结果 = con.storeFile(String.valueOf(file), file.getInputStream());它允许保存多个文件但出现相同的名称。

【解决方案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());

切！！

【讨论】：