使用axios的POST请求将JSON数据发送为multipart/form-data。

7 浏览
0 Comments

使用axios的POST请求将JSON数据发送为multipart/form-data。

以下API可在Postman中使用：

POST request that accepts from the backend

Spring Boot后端代码：

import lombok.extern.slf4j.Slf4j;
import org.apache.commons.net.ftp.FTPClient;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.servlet.mvc.support.RedirectAttributes;
@CrossOrigin(origins = "*", maxAge = 3600)
@RestController
@Slf4j
public class UploadFile {
    @Autowired
    private FTPClient con;
    @PostMapping("/api/auth/uploadfiles")
    public String handleFileUpload(@RequestParam("file") MultipartFile file, RedirectAttributes redirectAttributes) {
        try {
            boolean result = con.storeFile(file.getOriginalFilename(), file.getInputStream());
            redirectAttributes.addFlashAttribute("message",
                    "You successfully uploaded " + file.getOriginalFilename() + "!");
        } catch (Exception e) {
            log.error(e.getMessage(), e);
            redirectAttributes.addFlashAttribute("message",
                    "Could not upload " + file.getOriginalFilename() + "!");
        }
        return "redirect:/";
    }
}

ReactJS前端代码：我在this.state.ipData中有一个对象数组。

  exportFTP = async () => {
      const fromdata = this.state.ipData;
      alert("数据已发送到FTP服务器");
    axios({
      method: 'post',
      url: 'http://localhost:8080/api/auth/uploadfiles',
      data: fromdata,
      header: {
        'Accept': 'application/json ,text/plain, */*',
        'Content-Type': 'multipart/form-data',
        //'Authorization': 'Bearer '+JWTToken,
      },
    })
  }

触发函数的按钮：

我需要修改我的前端（ReactJS）代码，使其像在Postman中使用POST请求一样。当前的JS代码导致以下错误响应：

在路径为[]的上下文中为servlet [dispatcherServlet]的servlet.service()抛出异常[请求处理失败；嵌套异常是org.springframework.web.multipart.MultipartException：当前请求不是多部分请求]，根本原因如下

请注意，在使用Postman时API是正常工作的。如何修复JS代码？

0

2 答案

0 Comments

问题出现的原因是在使用axios的POST请求发送JSON数据时，将JSON数据作为Blob对象发送。解决方法是使用Blob API创建一个Blob对象，然后将其添加到FormData中，并将FormData作为请求的数据发送。

解决方法的具体步骤如下：

1. 创建一个函数，用于将JSON数据转换为Blob对象：

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

2. 在请求中使用该函数：

exportFTP = async () => {
  const formData = new FormData();
  formData.append("file", jsonBlob(this.state.ipData))
  axios({
    method: "post",
    url: "http://localhost:8080/api/auth/uploadfiles",
    data: formData,
    headers: { 
      Accept: "application/json ,text/plain, */*",
      "Content-Type": "multipart/form-data",
    },
  });
};

另外，文章中还提到了一个相关的问题，即上传文件大小超过限制。解决方法是在application.properties文件中添加以下配置：

spring.servlet.multipart.max-file-size=10MB

spring.servlet.multipart.max-request-size=10MB

参考链接中还提到了关于Spring Boot中MultipartFile的最大限制的问题。

通过以上方法，可以解决使用axios发送JSON数据作为multipart/form-data请求的问题，并解决上传文件大小超过限制的问题。

0
0 Comments

问题的出现原因是在发送axios POST请求时，尝试将JSON数据作为multipart/form-data发送，但是仍然从后端获取到相同的错误。

解决方法是尝试去除请求头并发送请求。具体代码如下：

exportFTP = async () => {
  const fromdata = this.state.ipData;
  alert("Data Send to FTP server");
  axios({
    method: 'post',
    url: 'http://localhost:8080/api/auth/uploadfiles',
    data: fromdata
  }).then(function (res) {
    if (res.ok) {
      alert("Perfect! ");
    } else if (res.status == 401) {
      alert("Oops! ");
    }
  }, function (e) {
    alert("Error submitting form!");
  });
}

感谢您对我的问题的关注。但是，仍然从后端获取到相同的错误。

0