Vuetify Send data from form with Axios - forms

Question

I am using Vuetify in my VueJs project and I need to send data from my form in which I am uploading a file (CSV) and got some number inputs. I need to do that with Axios.
I've tried to do something but always got a 404.
This is my Vuetify code:
<v-form>
<v-container>
<v-row>
<v-file-input
show-size
counter
multiple
label="Nacitaj CSV"
ref="myfile"
v-model="files"
></v-file-input>
</v-row>
<v-row>
<v-col>
<v-text-field
type="number"
label="zadaj cislo"
/>
</v-col>
<v-col>
<v-text-field
type="number"
label="zadaj cislo"
/>
</v-col>
</v-row>
<v-row>
<v-col :cols="2">
<v-btn
block
color="primary"
#submit="submitFiles"
>
Submit
</v-btn>
</v-col>
</v-row>
</v-container>
</v-form>
methods: {
submitFiles() {
if (this.files) {
let formData = new FormData();
// files
for (let file of this.files) {
formData.append("files", file, file.name);
}
// additional data
formData.append("test", "foo bar");
axios.post("/about", formData);
}
I've tried the script which I found on internet but it wasn't working; also the script was only for the file.

Answer 1

I know this is super old but for the next person arriving at this answer, let's take a look at submitFiles function:
submitFiles() {
if (this.files) {
let formData = new FormData();
// files
for (let file of this.files) {
formData.append("files", file, file.name);
}
// additional data
formData.append("test", "foo bar");
axios.post("/about", formData);
}
the first if is checking if files is not empty. files is part of the model. If there are files it creates a new object to hold the Form data (formData).
Then it will loop the files object and append the files to the object holding the form data and after that it will append a field called test with the value foo bar and make a post request to /about in the domain you're serving your page sending the form data object as the body. If you're getting a 404 it should mean that about doesn't exist.