Post complex vue forms including file and nested objects

Hi!

I have the passed week tried to figure out how to post a complex form containing file input, multiselect and textfields/areas, but I always end up in complex solution.
Since posting data to back-end server is a common task I guess there must exist a package or other solution to make this easier.

Vue template, data structure

data: function() {
        return {
            form: new Form({
                title: "",
                description: "",
                periods: [
                    {
                        start: "",
                        end: "",
                        service_grade: "",
                        months_fulltime: ""
                    }
                ],
                goalsfield: [],
                subgoalsfield: [],
                file: ''
            }),

I have so far tried.

let data = {};
       
        for (let property in this.originalData) {
            data[property] = this[property];
        }

axios ....

What I found is that I can not use this when I want to include a file and if I understand it correctly I need to use FormData?

Different solutions I have tried

  1. use formData.append to all different data.
  • It works to send file
  • I get nested objects on the back-end to handle. I want arrays (as when submit a normal form). So that I easy can handle inputs with laravel validation
 submitFile(){
     
            let formData = new FormData();
            formData.append('file', this.form.file);
            formData.append('title', this.form.title);
            formData.append('description', this.form.description);
            formData.append('periods', JSON.stringify(this.form.periods));
            formData.append('goalsfield', JSON.stringify(this.form.goalsfield));
            formData.append('subgoalsfield', JSON.stringify(this.form.subgoalsfield));
         
       
            axios.post( '/services',
                formData,
                {
                headers: {
                    'Content-Type': 'multipart/form-data'
                }
              }
            ).then(function(){
          console.log('SUCCESS!!');
        })
        .catch(function(){
          console.log('FAILURE!!');
        });
  1. Another solution.
    Added ref to and post the data as if would be a regular
    Advantage: I can post the file and I get arrays from the fields
    Disadvantage: I use vue-multiselect for two of the objects, and they ar not included since the do not “exist” as an regular
 <form
method="POST"
action="/services"
@submit.prevent="submit"
ref="formHTML"
 >
 submit: async function (e) {
            e.preventDefault();

         
            var formData = new FormData( this.$refs.formHTML );
           await axios({
                method: "post",
                url: "/services",

                data: formData,

                config: { headers: { "Content-Type": "multipart/form-data" } }
            })

            .then( response => { console.log(response.data); } )
´
            .catch( response => { console.log(response) } );
        }

I have the feeling that I do not do this POST according to best practice.

What is the best way to post a complex form including file and nested objects from vue to back-end?

I found it really nice and easy to create the UI but to POST the data… I just do not get it.

Any advice on where to find info about how to do this or package/library to use?

Thanks in advance!