Vue Custom input file component could not be submitted correctly

I have a component for browsing files which I use to select the file I want to upload. Here is my component:

       <template>
        <label class="file-select">
          <div class="select-button">
            <span v-if="value">Selected File: </span>
            <span v-else>Select File</span>
          </div>
          <input type="file" @change="handleFileChange"/>
        </label>
      </template>

      <script>
      export default {
        props: {
          value: File
        },

        methods: {
          handleFileChange(e) {
            this.$emit('input', e.target.files[0])
          }
        }
      }
      </script>

Here is how I used my component:

            <p>Select Image: <bim-fileinput v-model="file"></bim-fileinput></p>

Here is how I submit the file with axios:

 submit: function(){
            console.log(localStorage.getItem('token'));
            axios.post('/api/employees', {
               picture: this.file,   

            }, { headers: { Authorization: 'Bearer '.concat(localStorage.getItem('token')) }, 'Content-Type': 'multipart/form-data' })
            .then(response => {
               router.push({ name: "IndexEmployees"});
            }).catch(error => {
                console.log(error.message);
            });
        }

After submitting, in controller I get the picture attribute but as an empty array. so I tried to print it using console. console.log('File '+ JSON.stringfy(this.file))

I got File {} as an empty object.

So I need to figure out where is the problem in my code or how to make it correctly.

Thanks in advance.

from Newest questions tagged laravel-5 - Stack Overflow https://ift.tt/2K7Z10D
via IFTTT