POST file along with form data Vue + axios

So, I figured this one out in a simpler way:

    let rawData = {                name: this.name,                gender: this.gender,                dob: this.dob              }              rawData = JSON.stringify(rawData)    let formData = new FormData()          formData.append('avatar', this.avatarFile, this.avatarFile.name)          formData.append('data', rawData)    try {            let response = await this.$axios.post('http://localhost:3003/api/test.php', formData, {              headers: {                'Content-Type': 'multipart/form-data'              }         })

test.php:

$_POST = json_decode($_POST['data'],true);

Note: I had an option of using:

Object.keys(rawData).map(e => {            formData.append(e, rawData[e])          })

but since I was dealing with nested objects (name: { first: '', last: ''} ) in rawData, I chose not to do that as it would require recursive methods on either client side or server side.

php vue.js vue-component axios nuxt.js

PHP ( process.php )

<?php    $data = array(        "post"  => $_POST,        "files" => $_FILES    );    echo json_encode($data);?>

Vue and form HTML

let vm = new Vue({    el: "#myApp",    data: {        form: {}    },    methods: {        submit: async function (e) {            e.preventDefault();            /* formData */            var formData = new FormData( this.$refs.formHTML );            /* AJAX request */            await axios({                method: "post",                url: "process.php",                data: formData,                config: { headers: { "Content-Type": "multipart/form-data" } }            })            /* handle success */            .then( response => { console.log(response.data); } )            /* handle error */            .catch( response => { console.log(response) } );        }    }});

<script src="https://cdn.jsdelivr.net/npm/vue"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.js"></script><div id="myApp" >    <form @submit="submit" ref="formHTML" >        Name: <input type="text" name="name" v-model="form.name" /><br />        Gender:        <input type="radio" name="gender" value="male" v-model="form.gender" /> Male        <input type="radio" name="gender" value="female" v-model="form.gender" /> Female <br />        File: <input type="file" name="upload" v-model="form.upload" /><hr />        <input type="submit" name="submit" value="Submit" />    </form></div>

Expand snippet