如何使用 angular-file-upload 和 Spring 为 POST 请求设置请求部分？

Question

不幸的是this answer 对我没有帮助。问题似乎是由于某种原因，我的 POST 请求中不存在请求参数file。

我正在尝试在 POST 请求中上传文件，无论是二进制文件还是文本文件。 REST 控制器显示：

@PostMapping(WordEmbeddingApiPaths.UPLOAD_MODEL)
@RequestMapping(method=RequestMethod.POST, headers={"Content-Type=multipart/form-data"})
public ResponseEntity<WordVectorListDto> uploadModel(
        @RequestParam("file") MultipartFile file, 
        RedirectAttributes redirectAttributes) {

    LOGGER.debug("POST uploadModel");

    return new ResponseEntity<WordVectorListDto>((WordVectorListDto)null, HttpStatus.OK); 
}

在我正在运行的客户端上：

var uploader = $scope.uploader = new FileUploader({
    url: 'http://localhost:8080/rest-api/dl4j/we/uploadModel'
});

uploader.onAfterAddingFile = function($modelFile) {
    console.info('onAfterAddingFile', $modelFile);

    var fd = new FormData();

    fd.append('file', $modelFile.file);

    $http.post($modelFile.url, fd, {
        headers: {
            'Content-Type': 'multipart/form-data'
        }, 
        params: {'file' : $modelFile.file}
    })
    .then(
        function (data) {
            alert("upload success");
        }, 
        function (data, status) {
            alert("upload error");
        }
     );

};

但是，我收到 400 Bad Request 作为服务器响应。

知道问题出在哪里吗？

---

更新：

我看到服务器端抛出了一个内部异常，说明：

org.springframework.web.multipart.support.MissingServletRequestPartException: 所需的请求部分“文件”不存在

我认为我已经设置了这个 - 我怎样才能做到这一点？

Answer 1

使用 AngularJS 发布 FormData

使用FormData API 对象执行POST 时，将Content-Type 标头设置为undefined 很重要。

var fd = new FormData();

fd.append('file', $modelFile.file);

$http.post($modelFile.url, fd, {
    headers: {
        //'Content-Type': 'multipart/form-data'
        'Content-Type': undefined
    }, 
    //params: {'file' : $modelFile.file}
})

当XHR send() method 获得由FormData API 创建的FormData 对象时，它会自动将内容类型设置为multipart/form-data 并包含正确的边界。

通过让 AngularJS 框架覆盖内容类型，边界设置不正确。

---

调试小程序

这个问题是一个将多个东西放在一起而不调试每个部分的示例。

这个问题有几个未知的代码组件：

• 未经调试的 AngularJS POST 方法
• 未经调试的 Spring 后端
• 未经调试的神秘 AngularJS 服务

这个答案指出了 AngularJS POST 方法的错误，但还有一些其他未知数。 Spring后端是否正常工作？神秘的FileUploader 服务使用正确吗？

调试涉及隔离未知数并分别对其进行测试。

Angular POST 方法是否适用于已知的后端，例如 HTTP BIN - HTTP Request & Response Service？

Spring 后端是否可以与经过测试的上传器一起使用？

有关详细信息，请参阅How to debug small programs。

Answer 2

如果您使用的是 @EnableAutoConfiguration，那么您需要按照此处https://github.com/spring-projects/spring-boot/issues/2958

的讨论执行以下操作

1. @EnableAutoConfiguration(exclude = {MultipartAutoConfiguration.class})

2. 定义以下 bean

   @Bean(name = "multipartResolver") 公共CommonsMultipartResolver commonsMultipartResolver(){ CommonsMultipartResolver 解析器 = new CommonsMultipartResolver(); 解析器.setMaxUploadSize(50*1024*1024); 返回解析器； }

   @豆 @订单（0） 公共 MultipartFilter multipartFilter(){ MultipartFilter multipartFilter = new MultipartFilter(); multipartFilter.setMultipartResolverBeanName("multipartResolver"); 返回多部分过滤器； }