react的ajax提交file,javascript - React ajax request with multipart file and json data - Stack Overflow...

I have a base request like this:

export const request = (options) => {

const headers = new Headers({

'Content-Type': 'application/json',

});

if (Common.getToken()) {

headers.append('Authorization', 'Bearer ' + Common.getToken())

}

const defaults = {headers: headers};

options = Object.assign({}, defaults, options);

return fetch(options.url, options)

.then(response =>

response.json().then(json => {

if (!response.ok) {

return Promise.reject(json);

}

return json;

})

);

};

and my ajax request:

onCreateNewPost(postDataRequest, photoBody) {

const formData = new FormData();

formData.append('photo', photoBody);

formData.append('postData', JSON.stringify(postDataRequest));

return request({

url: API_BASE_URL + '/posts/new-post',

method: 'POST',

body: formData

});

};

where postDataRequest - json object included post title, description etc...

photoBody - image file.

In the backend I have a controller's method:

@PostMapping(value = "/api/posts/new-post")

@PreAuthorize("hasRole('ADMIN')")

public ResponseEntity createNewPost(@CurrentUser UserPrincipal currentUser,

@RequestBody NewPostDataRequest postRequest,

@RequestParam MultipartFile photo) {

// method body

return ResponseEntity.ok(new ActionCompleteResponse(true));

}

but when I send a request, I get Status Code: 400. What is the problem? I can separately send either json data or multipart data, but I can’t figure out how to transfer them together with one request. I tried to put headers without a Content-Type in the request, as in the code below, so that the request itself indicates it, but in response I get code 415.

onCreateNewPost(postDataRequest, photoBody) {

const formData = new FormData();

formData.append('photo', photoBody);

formData.append('postData', JSON.stringify(postDataRequest));

const headers = new Headers({});

if (Common.getToken()) {

headers.append('Authorization', 'Bearer ' + Common.getToken());

}

return request({

url: API_BASE_URL + '/posts/new-post',

headers: headers,

method: 'POST',

body: formData

});

};

What should I do?