发布 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：所需的请求部分“文件”不存在]

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

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

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

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

删除您的“Content-Type”：“multipart/form-data”。

Answer 3

您是否尝试过使用@RequestPart 而不是@RequestParam 来代替MultipartFile file。