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

Question

我尝试了所有方法，但我经常从 Spring Boot 中收到此错误

已解决由 Handler 执行引起的异常：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 引导函数中将名称“文件”与 MultiPartFile file 的引用名称相关联，而不是与 @RequestParam('file')。

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

我是如何获得 imageFile 的？

解释： @ViewChild('fileInput') myFile: ElementRef 参考来自<input type="file" #fileInput>

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

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

Answer 1

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

我刚刚删除了我的标题

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) {...}

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

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