I am trying to develop a micro-service to receive base64 encoded data. When I tried to send it over 6 MB of data, I am getting below error -
The multi-part request has parameterized data(excluding the uploaded file) that exceeded the limit of maxPostSize set on the associated connector
@RequestMapping(value = "/base64/upload", method = RequestMethod.POST,
consumes = MediaType.MULTIPART_FORM_DATA_VALUE)
public String base64(@RequestParam("file") String file) {
System.out.println(file);
return "done";
}
My App Properties:
#http://docs.spring.io/spring-boot/docs/current/reference/htmlsingle/#common-application-properties
#search multipart
spring.http.multipart.max-file-size=200MB
spring.http.multipart.max-request-size=100MB
So I read other posts and changed above rest api to below -
@RequestMapping(value = "/base64/uploadFile", method = RequestMethod.POST,
consumes = MediaType.MULTIPART_FORM_DATA_VALUE)
public String base64(@RequestParam("file") MultipartFile file) {
if (file.isEmpty()) {
return "redirect:uploadStatus";
}else {
return "redirect:success";
}
}
Now how do I upload converted base64 data as a file from front-end application(react app)?
function getBase64(file) {
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function () {
console.log(reader.result); // file content is converted to base64
makeRequest(reader.result,file);
};
reader.onerror = function (error) {
console.log('Error: ', error);
};
}
In make request, how to send it as file ? How to create a new file in JS or React ?
function makeRequest(base64data, actualFile) {
var data = new FormData();
// data.append("file", actualFile); // works
data.append("file", base64data); // doesn't works ???
var xhr = new XMLHttpRequest();
xhr.withCredentials = true;
xhr.addEventListener("readystatechange", function () {
if (this.readyState === 4) {
console.log(this.responseText);
}
});
xhr.open("POST", "http://localhost:8080/base64/uploadFile");
xhr.send(data);
}
Converting read.result to buffer is the only method I can think of. See the following code:
const buffer = Buffer.from(base64data, 'base64');
after converting read.result to buffer, the multipart post request can be created manually in an easy way:
const formData = new FormData();
formData.append("myFile", buffer, { filename: 'tmp' });
and then instead of send data, send the formData.
I hope this solution solves your problem, the pending part here is to use Buffer and attach to the form to send your file multi-data.
Note: You can change const by var. References:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.