发布MultipartFile - 请求部分未预设错误

Question

I try to send an image from a ionic Front-End application through a post method to Back-End services in Spring boot

我已经完成了这个方法，使用FormData对象中的图像将帖子发送到后端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 boot方法：

 @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);
  }

当我做图像的帖子时，我收到此错误：

.w.s.m.s.DefaultHandlerExceptionResolver：已解决[org.springframework.web.multipart.support.MissingServletRequestPartException：所需的请求部分'文件'不存在]

我已经通过Postman发起请愿并且它已经有效，这就是我认为错误在tyscript代码中的原因。

我在邮递员和代码之间看到的唯一区别是，在表单数据中，将键标记为类型文件或键入文本，我选择了类型文件。

我尝试以另一种方式发布请求帖子：

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：请求被拒绝，因为没有找到多部分边界

我究竟做错了什么？有没有办法向FormData表明密钥是postman类型的文件？

Answer 1

添加图像为Blob关注Ionic tutorial

 const imgBlob = new Blob([reader.result], {type: file.type});
  formData.append('file', imgBlob, file.name);

在readFile函数中，程序利用File API中的FileReader将文件读入ArrayBuffer。一旦成功读取文件，就会调用onloadend事件。然后，应用程序创建一个FormData对象，将数组缓冲区包装在Blob中，并将其添加到名为“file”的FormData对象中。这与服务器期望的请求参数名称相同。

Answer 2

删除“内容类型”：“multipart / form-data”。

Answer 3

你有没有尝试过@RequestPart而不是@RequestParam用于MultipartFile file。