Upload file using vue.js and spring-boot with axios - api

Question

If have a form with a text field and file upload option. The file is called start.vue(say). From that a module.js(say) file is called. Using that service.js(say) is called. That service.js calls the api in moveController.java(say). I am getting error as: Current request is not a multipart request
Tried to find the syntax so that multipart header is retained till api is called. module.js is getting the appropriate file value. But no idea about service.js
start.vue is:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
export default {
name: "BatchMove",
computed: {
loading() {
return this.$store.state.loader.loading;
},
msgs() {
return this.$store.state.moveBatchHistory.msg;
}
},
components: {},
data() {
return {
file: '',
emailId: ''
};
},
methods: {
submitFile() {
console.log("logging email... " + this.emailId);
const { emailId, file } = this;
this.$store.dispatch("moveBatchHistory/ans", { file, emailId });
},
handleFileUpload(){
this.file = this.$refs.file.files[0];
}
}
}
</script>
module.js is:
import {
moveBatchHistoryService
} from '../_services';
export const moveBatchHistory = {
namespaced: true,
state: {
msg: null
},
actions: {
ans({commit}, {file, emailId}) {
moveBatchHistoryService.getSomething(file, emailId).then(
response => { commit("ans", response); }
);
}
},
mutations: {
ans(state, response) {
state.msg = response
}
}
}
service.js is:
import config from '../config';
import {authHeader} from '../_helpers';
import axios from 'axios';
import {store} from '../_store';
export const moveBatchHistoryService = {
getSomething
};
function getSomething(file, emailId) {
var headers = authHeader();
const requestOptions = {
method: 'POST',
headers: headers,
params: {
"file": file,
"Email": emailId
}
};
return axios(`${config.apiUrl}/api/moveBatch`, requestOptions)
.then(response => {
store.dispatch("alert/errorTime", "We are here!");
return response.data;
}).catch(() => {
store.dispatch("alert/errorTime", "Unable to process your request this time. Please try again latter.");
});
}
'''
moveController.java is:
#RequestMapping(value = "/moveBatch", method = RequestMethod.POST)
public void singleFileUpload(#RequestParam("file") MultipartFile file, String Email) throws Exception {}
current request is not multipart request in moveController.java

Answer 1

I have done the following way.
import config from '../config';
import {authHeader} from '../_helpers';
import axios from 'axios';
import {store} from '../_store';
export const moveBatchHistoryService = {
getSomething
};
function getSomething(file, emailId) {
let formData = new FormData();
formData.append('file', file);
formData.append('Email',emailId);
return axios.post(`${config.apiUrl}/api/moveBatch`, formData, { headers: { 'Content-Type': 'multipart/form-data' } })
.then(response => {
store.dispatch("alert/successTime", "Successfully completed the request!");
return response.data;
}).catch(() => {
store.dispatch("alert/errorTime", "Unable to process your request this time. Please try again latter.");
});
}

Answer 2

I am not very good at vue.js but for posting the data you could refer this post
As for as backed is concern you have not mentioned whether the email is #RequestParam, #RequestBody. Use this below for that
#RequestMapping(value = "/moveBatch", method = RequestMethod.POST)
public ResponseEntity singleFileUpload(#RequestPart("Email") String Email,
#RequestPart("file") MultipartFile dataFile) throws IOException {
System.out.println(String.format("Data - %s", email));
return ResponseEntity.ok().build();
}
So when you upload File along with any body or Param the content-type will be multipart/form-data so make sure in client side you add the type
so why #RequestPart, if you see the source code they have said the below
Annotation that can be used to associate the part of a "multipart/form-data" request with a method argument.
Look into it.