Question

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

org.apache.tomcat.util.http.fileupload.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

如果服务器正在考虑，则需要使用multipart / form-data发送请求。这是我使用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;
}

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

1 个答案: