Post MultipartFile - 请求部分未预设错误

Question

我尝试通过 post 从 ionic 前端应用程序发送 image Spring boot

后端服务的方法

我已经完成了使用 FormData 对象中的图像将 post 发送到后端 url 的方法：

  uploadImageService(url: string, image: any) {
     console.log('post service: upload Image', + url);
     // Initiates a FormData object to be sent to the server
     const fd: FormData = new FormData();
     fd.append('file', image);
     const xhr = new XMLHttpRequest;
     console.log('form data file: \n' + fd.get('file'));
     xhr.open('POST', url);
     // Send the FormData
     xhr.send(fd);
     console.log(xhr.response);
     return xhr.responseText;
  }

// call this method:

this.webapiService.uploadImageService(this.globalDataService.getUrlMedium() 'riskcontrol/subir-imagen', this.selectedImage);

这是spring收集这个post的引导方法：

 @RequestMapping(method = RequestMethod.POST, value = "/subir-imagen")
    public ResponseEntity handleFileUpload(@RequestParam("file") MultipartFile file) {
       LOGGER.log(Level.INFO, "/Post, handleFileUpload", file);     
       String associatedFileURL = fileManagerService.storageFile(file);
       return ResponseEntity.ok(associatedFileURL);
  }

当我执行图像的 post 时，我得到这个 error:

.w.s.m.s.DefaultHandlerExceptionResolver : Resolved [org.springframework.web.multipart.support.MissingServletRequestPartException: Required request part 'file' is not present]

我已经通过 Postman 发起了请愿，并且成功了，这就是为什么我认为错误出在 tyscript 代码中。

我在 postman 和代码之间看到的唯一区别是，在表单数据中，将 key 标记为 type file 或 type text，我选择了 type file。

我尝试以另一种方式提出请求post：

const httpOptionsImages = {
  headers: new HttpHeaders({
    'Content-Type': 'multipart/form-data',
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Methods': 'GET, PUT, POST, DELETE'
  })
};


// function

uploadImageService(url: string, image: any): Observable<any> {
    console.log('post service: upload Image', + url);
    // Initiates a FormData object to be sent to the server
    const fd: FormData = new FormData();
    fd.append('file', image);

    return this.http
        .post(url, fd, httpOptionsImages);
  }


// call to the function

this.webapiService.uploadImageService(this.globalDataService.getUrlMedium() + 'riskcontrol/subir-imagen', this.selectedImage)
        .subscribe( result => {
          console.log(result);
});

但是这样我又得到了一个错误:

FileUploadException: the request was rejected because no multipart boundary was found

我做错了什么？有什么方法可以向 FormData 表明密钥是 file 类型，如 postman?

Answer 1

将图像添加为 Blob 关注 Ionic tutorial

 const imgBlob = new Blob([reader.result], {type: file.type});
  formData.append('file', imgBlob, file.name);
In the readFile function the program utilizes the FileReader from the File API to read the file into an ArrayBuffer. The onloadend event is called as soon as the file is successfully read. The app then creates a FormData object, wraps the array buffer in a Blob and adds it to the FormData object with the name 'file'. This is the same name the server expects as request parameter.

Answer 2

删除你的'Content-Type'：'multipart/form-data'。

Answer 3

您是否尝试过使用 @RequestPart 而不是 @RequestParam 作为 MultipartFile file。

Post MultipartFile - 请求部分未预设错误

Post MultipartFile - Request Part not preset Error

spring

post

multipartform-data

ionic4

multipart

我尝试通过 post 从 ionic 前端应用程序发送 image Spring boot