Spring Boot multipart.support.MissingServletRequestPartException同时通过Angular中的POST请求发送formData

Question

我尝试了一切，并且从Spring Boot不断收到此错误。

由处理程序执行引起的已解决异常： org.springframework.web.multipart.support.MissingServletRequestPartException ：所需的请求部分' file '不存在

这是我的Angular代码。 注意 ：我对我的POST请求使用Http （ 不是HttpClient ）。

updateUserProfilePicViaHttp(userId: number, imageFile: any) {

    let headers: Headers = new Headers()
    headers.append('Content-Type', 'multipart/form-data;boundary=imageUpload');

    let formData: FormData = new FormData()
    formData.append('file', imageFile, imageFile.name)

    return this.http.post(this.baseUrl + `user/${userId}/profile_pic`, formData, { headers: headers })

}

这是我的Spring Boot代码

@RequestMapping(value="/{userId}/profile_pic",
                method = RequestMethod.POST,
                consumes = MediaType.MULTIPART_FORM_DATA_VALUE)
@ResponseBody
public ResponseEntity<User> uploadProfilePic(@PathVariable("userId") Integer id, @RequestParam("file") MultipartFile file,
                                   RedirectAttributes redirectAttributes){

    IUserDao userDao = (IUserDao) getDao();
    User user = null;

    try {
        user = userDao.saveAndUpdateProfilePic(id, file.getBytes());
    } catch (IOException e) {
        e.printStackTrace();
    }

    if( user != null)
        return new ResponseEntity<>(user, HttpStatus.OK);
    else
        return new ResponseEntity<>(user, HttpStatus.NOT_FOUND);


}

我认为我的Angular代码有问题，因为当我通过Postman发送图像时，一切正常！

邮递员图片：

谢谢！

编辑 ：出于某种原因，我尝试在函数中将@RequestParam("file") MultipartFile file替换为@RequestParam MultipartFile file 。 仍然出现相同的错误

好像春天说

所需的请求部分“文件”不存在

它在我的Spring启动函数中将名称'file'与MultiPartFile file引用名关联，而不与@RequestParam('file')关联。

EDIT2 ：我听了Ravat并修改了我的代码。

我如何获得imageFile？

说明： @ViewChild('fileInput') myFile: ElementRef <input type="file" #fileInput> @ViewChild('fileInput') myFile: ElementRef引用

这就是我的Angular函数中的imageFile。 imageFile = this.myFile.nativeElement.files[0]

但是仍然，同样的错误...

Answer 1

经过6个小时的谷歌搜索并向Duck Overflow解释了问题所在，我偶然发现了这个问题 。

我刚刚删除了标题

headers.append('Content-Type', 'multipart/form-data;boundary=imageUpload');

最终代码

updateUserProfilePicViaHttp(userId: number, imageFile: any) {

    let formData: FormData = new FormData()

    formData.append('file', imageFile, imageFile.name)

    return this.http.post(this.baseUrl + `user/${userId}/profile_pic`, formData)

}

Answer 2

问题在以下代码中

updateUserProfilePicViaHttp(userId: number, image: string) {...}

我不知道角度，这里您要在图像变量中发送字符串

那肯定是行不通的，因为它需要一个文件。