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

Question

我尝试通过 post 方法将图片从 ionic 前端应用程序发送到中的后端服务春季启动

我已经完成了此方法，该方法将帖子发布到具有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：所需的请求部分“文件”不存在]

我通过邮递员发起了请愿书，该请愿书一直有效， 这就是为什么我认为错误出在打字稿代码中。

我看到的邮递员和代码之间的唯一区别是，在表单数据中，将键标记为 type文件或 type text < / em>，并且我选择了类型文件。

我试图以另一种方式发布请求：

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 指示密钥的类型为 file ？

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。