vue how to post list with files to spring - spring-boot

Question

Srping boot 2.x and vue 2.x.
My UI looks like(not the complete picture for simplicity) :
my java bean is:
public class Attachment {
private Integer eaId;
private Integer eId;
private String description;
private MultipartFile file;
//setters and getters
}
public class Booking {
private Integer id;
private String eNo;
private List<Attachment> attachmentList;
//some other fields
}
Each attachment item contains file and file description.
My front-end is:
<tr v-for=" (a, index) in eb.attachmentList" v-bind:key="index">
<td><input type="text" v-model="a.description" /></td>
<td><input type="file" v-on:change="selectFile(index, $event)" /></td>
<td><i class="far fa-trash-alt fa-lg" v-on:click="delAttachment(index)" style="color: red"></i>
</td>
</tr>
my spring controller is:
#PostMapping("/upload")
public Booking upload(#ModelAttribute Booking b) {
//....
}
the vue code is:
var vm = new Vue({
el: '#test',
data() {
return {
eb: {
'attachmentList': []
}
}
},
methods: {
selectFile(index, e) {
this.eb.attachmentList[index].file = e.target.files[0];
},
saveTest() {
var formData = new FormData();
//how to populate formData ?
axios.post("/tf/upload",
formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
}
).then(function() {
//....
})
.catch(function(error) {
//...
});
}
}
});
I want to post this form data to spring controller with axios, that is convert form data to java bean Booking and the file list of form to List<Attachment> attachmentList of Booking.
It seems that I have to use FormData, right?
My problems is:
How to populate the FormData in my case?
If just upload file, I can use formData.append('file', file) then
post it with header multipart/form-data directly.
But now there are a few file list and each file associated with its description. I don't know how to do such that I can get the form data in my spring controller.

Answer 1

In Vue side:
First, you need to create a new object of type FormData and append to it a reference for the input element that you are appending the file to.
HTML:
<input type="file" #change="processFile($event)">
Vue:
methods: {
processFile(event) {
this.myFile = event.target.files[0]
}
}
This will do myFile variable hold a reference to the appended file.
When the time to upload comes:
const formData = new FormData();
formData.append('attribute-name-spring-expects', this.myFile, this.myFile.name);
// other attributes
Then, send this form data with axios like this:
const requestConfig = {
headers: { 'content-type': 'multipart/form-data' }
}
axios.post(url, formData, requestConfig);