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

Question

我尝试了一切，我不断从Spring Boot中获得此错误

  

由处理程序执行导致的已解决异常： org.springframework.web.multipart.support.MissingServletRequestPartException ：所需的请求部分“文件”不存在

这是我的Angular代码。 注意：我正在使用 Http （不是HttpClient ）来处理我的POST请求。

export var foo = function() {
    // ...
};
export let bar = () => {
    // ...
};
export const baz = value => {
    // ...
};

这是我的Spring Boot代码

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

}

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

邮差图片：

谢谢！

编辑：出于某种原因，我尝试在我的函数中用@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); } 替换@RequestParam("file") MultipartFile file。 仍然得到相同的错误

当Spring说

时

  

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

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

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

我是如何获得imageFile的？

说明： 来自@RequestParam('file')

的@ViewChild('fileInput') myFile: ElementRef引用

这就是我的Angular函数中的imageFile。 <input type="file" #fileInput>

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

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

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

肯定不会起作用，因为它需要是一个文件。