Spring AngularJS上传文件功能 - 400错误错误请求

Question

我正在尝试使用 Spring 和 AngularJS 上传文件，但收到 400 Bad request 错误：

> error: "Bad Request"
> exception: "org.springframework.web.multipart.support.MissingServletRequestPartException"
> message: "Required request part 'file' is not present."
> path:"/project/ffl/newDocument

我经历了如何实现功能的不同示例（#1、#2、#3、#4、#5 等等）并遵循了所有这些示例。虽然，我仍然收到 400 错误。

我的要求：

Request URL:https://localhost:8443/project/ffl/newDocument
Request Method:POST
Status Code:400 Bad Request
Remote Address:[::1]:8443
Response Headers
view source
Cache-Control:no-cache, no-store, max-age=0, must-revalidate
Connection:close
Content-Type:application/json;charset=UTF-8
Date:Wed, 16 Dec 2015 18:24:08 GMT
Expires:0
Pragma:no-cache
Server:Apache-Coyote/1.1
Strict-Transport-Security:max-age=31536000 ; includeSubDomains
Transfer-Encoding:chunked
X-Content-Type-Options:nosniff
X-Frame-Options:DENY
X-XSS-Protection:1; mode=block

Request Headers
view source
Accept:application/json, text/plain, */*
Accept-Encoding:gzip, deflate
Accept-Language:en-US,en;q=0.8,uk;q=0.6,ru;q=0.4
Connection:keep-alive
Content-Length:75515
Content-Type:multipart/form-data; boundary=----WebKitFormBoundarylcovac73AQDt1CNW
Host:localhost:8443
Origin:https://localhost:8443
Referer:https://localhost:8443/project/
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/47.0.2526.80 Safari/537.36
X-Requested-With:XMLHttpRequest

Request Payload
------WebKitFormBoundarylcovac73AQDt1CNW
Content-Disposition: form-data; name="file"; filename="test.pdf"
Content-Type: application/pdf


------WebKitFormBoundarylcovac73AQDt1CNW--

HTML：

<form ng-submit="uploadFile()" class="form-horizontal" enctype="multipart/form-data">
   <input type="file" name="file" id="file" ng-model="document.fileInput" onchange="angular.element(this).scope().upload(this)" >
   <button class="btn btn-primary" type="submit">Submit</button>
</form>

JS：

    $scope.document = {};
      var file = {};
      $scope.upload = function(fileInput) {
        file = fileInput;
      };

  $scope.uploadFile = function(){
    var formData = new FormData();
    formData.append("file", file.files[0]);

    $http.post('ffl/newDocument', formData, {
       headers: {'Content-Type': undefined },
       transformRequest: angular.identity
            }).then(function (response) {

            }, function (error) {
                console.error('Error: ', error.status, error.data);
                });
       };

Java：

@RestController
@RequestMapping("/ffl")

@RequestMapping(value="/newDocument", method = RequestMethod.POST, consumes = {"multipart/form-data"})
public @ResponseBody void uploadFile(@RequestPart("file") MultipartFile file) throws IOException {

我们将不胜感激。

Answer 1

1。列表项 更改 Spring Controller 上的方法以使用它：

    RequestMapping(value = "/newDocument", method = RequestMethod.POST)
    public @ResponseBody Object uploadFiles(MultipartHttpServletRequest request, HttpServletResponse response) throws IOException {
        
        Iterator<String> iterator = request.getFileNames();
        MultipartFile multipartFile = null;
        while (iterator.hasNext()) {
            multipartFile = request.getFile(iterator.next());
            //do something with the file.....
        }
    } 

2。还有你的 Angular 控制器：

    console.log(files[0]);
    $http.post( '/myEndpoint', formData, {
        headers: { 'Content-Type': undefined },
        transformRequest: angular.identity
    }).success(function (result) {
        console.log('Success');
    }).error(function () {
        console.log('Failure');
    });  

3。你应该有以下依赖：

commons-fileupload

4。在你的 servlet-configuration.xml 中添加这个 bean

    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver" />