File Upload

Hi all,

I have the following component

<template>
    <div v-if="!image">
        <small class="changeUpload">Change/Upload</small>
        <input type="file" @change="onFileChange">
    </div>
    <div v-else>
        <!--<img :src="image" />-->
        <button @click="removeImage" class="btn-link">Remove image</button>
    </div>
</template>

<script>
    export default {

        props: ['dog', 'image'],

        data() {
            return {
                image: '',
                dog_id: this.dog.id,
                formData:new FormData(),
                file: null
            }
        },

        methods: {
            onFileChange: function onFileChange(e) {
                var files = e.target.files || e.dataTransfer.files;
                if (!files.length)
                    return;
                this.createImage(files[0]);
                this.formData.append('file', files[0]);
                this.file = files[0];
            },
            createImage: function createImage(file) {
                var image = new Image();
                var reader = new FileReader();
                var vm = this;
                reader.onload = function (e) {
                    vm.image = e.target.result;
                };
                reader.readAsDataURL(file);

                axios({
                    method: 'post',
                    url: '/member/dog/profile/upload/' + this.dog_id,
                    data: {
                        image: this.file,
                        id: this.dog_id
                    }
                });
            },
            removeImage: function (e) {
                this.image = '';
            }
        }

    }
</script>

But when I check the console, as I'm dd($request->all()); from the controller. I see the following:

array:2 [
  "image" => null
  "id" => 1
]

So the image/file isn't been passed, I wondered if someone could lend a hand help me figure out why this would be.

Thanks in advance.