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

Question

I'm trying to upload the file using Spring and AngularJS, but I'm getting a 400 Bad request error:

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

I went through different example of how to implement the functionality ( #1 , #2 , #3 , #4 , #5 and few more) and followed all of them. Although, I'm still getting the 400 error.

My request:

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 {

Any help will be appreciated.

Answer 1

1 . List item Change the method on the Spring Controller to use this:

    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 . And your Angular controller:

    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 . You should have following Dependency:

commons-fileupload

4 . Add this bean in your servlet-configuration.xml

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