向Spring MVC Controller发送多部分请求时出现400错误的请求

Question

I am attempting to send form data with Multipart data (Image) to Spring MVC controller, but its not calling Spring controller defined and showing 400 Bad Request error when http post call in chrome console. I have referred all questions related to this in SO but i could not unlock the problem. Please find where i did mistake.

Html Code:

<input ng-model='file1' type="file"/>

AngularjS Code:

$scope.saveData = function (formObj) {
        $http({
            url: CONTEXT_PATH+'saveFile',
            method: "POST",
            headers: { 'Content-Type': undefined },
            transformRequest: function (data) {
                var formData = new FormData();
                formData.append("model", angular.toJson(data.model));
                formData.append("file", data.files);
                return formData;
            },
            data: { model: formObj, files: $scope.file1 }
        }).then(function (response) {
            alert(response);
        });
    };

Spring Controller Code:

@RequestMapping(value = "/saveFile", method = RequestMethod.POST, consumes = MediaType.MULTIPART_FORM_DATA_VALUE)
public @ResponseBody String storeAd(@RequestPart("model") String adString, @RequestPart("file") MultipartFile file) throws IOException {
    System.out.println("adString > "+adString);
    return "OK";
}

Error in browser console:

Failed to load resource: the server responded with a status of 400 (Bad Request)

Data Details in Browser:

Request Header:

Accept: application/json, text/plain, */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Cache-Control: no-cache
Connection: keep-alive
Content-Length: 24635
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryvpAdhKSccplcX99W

Form Data:

model: {"emailId":"ss@ss.com",..}
file: undefined

Response Header:

Connection: close
Content-Length: 1058
Content-Type: text/html;charset=utf-8

No exception at Server Side.

Answer 1

Using below request, I was able to upload file to a controller similar to yours.

Form Data :

------WebKitFormBoundaryDhtDYn8BtyH0NdRW
Content-Disposition: form-data; name="file"; filename="dummy_file.xls"
Content-Type: application/vnd.ms-excel
------WebKitFormBoundaryDhtDYn8BtyH0NdRW--

Request Headers :

POST /demo/upload?data=dummy_data HTTP/1.1
Host: localhost:5005
Connection: keep-alive
Content-Length: 36563
accept: */*
Origin: http://localhost:5005
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like     Gecko) Chrome/75.0.3770.100 Safari/537.36
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryDhtDYn8BtyH0NdRW
Referer: http://localhost:5005/swagger-ui.html
Accept-Encoding: gzip, deflate, br
Accept-Language: en-GB,en-US;q=0.9,en;q=0.8

You should try changing Content-Type as above as well as add boundary.

Do check out another solution at https://stackoverflow.com/a/39545774/1776132

Answer 2

Its working when i use @RequestParam instead of @RequestPart

@RequestMapping(value = "/saveFile")
public @ResponseBody String storeAd(@RequestParam ("model") String adString, @RequestParam ("file") MultipartFile file) throws IOException {
    System.out.println("adString > "+adString);
    return "OK";
}