在单个请求中发送多部分文件和@RequestBody

Question

在我正在开发的React web应用程序中，有一个包含一些用户数据的文件上传部分。然而，当我试图上传文件时，服务器抛出以下错误。

组织。阿帕奇。公猫util。http。文件上传。FileUploadException:请求被拒绝，因为找不到多部分边界

反应侧

function fileChangedHandler(event) {
    let formData = new FormData();
    formData.append("file", event.target.files[0]);
    formData.append("name", event.target.files[0].name);

    SENDER.post(
      "/api/task_resources",{ 
        addedBy: parseInt(localStorage.getItem('id')),
        taskId: parseInt(props.taskId)
      },{
          params: {
            file: formData
        }
        }         
    )
      .then(res => {
        if (res.status === 200) {
          alert("upload suc");
          window.location.reload()
        }
      })
      .catch(err => alert("err"));
  }

我的Spring Boot控制器如下所示。

@PostMapping("/task_resources")
  public void addResourceToTask(@RequestParam("file") MultipartFile file,@RequestBody AddTaskResourceRequest addResReq) {
      String fileName = fileService.storeFile(file);

      String fileDownloadUri = ServletUriComponentsBuilder.fromCurrentContextPath()
               .path("/api/downloadFile/")
               .path(fileName)
               .toUriString();

       UploadFileResponse response =  new UploadFileResponse(fileName, fileDownloadUri,
              file.getContentType(), file.getSize());

       taskResourceService.addResource(addResReq, fileDownloadUri);
  }

Answer 1

如果您的服务器不支持，则需要使用多部分/表单数据发送请求。下面是我使用Axios实现的示例。

const postGalleryImageRequest = async (sessionToken, userLogged, image) => {

    const data = new FormData();
    data.append('newImage', image);

    const result = await api.post('business/' + userLogged.businessId + '/gallery', data, {
        headers: { 
            Authorization: sessionToken,
            'Content-Type': 'multipart/form-data',
        }
    })  .then((response) => {
            return response.data
        })
        .catch(error => {
            ....
        })
    return result;
}