Issues in uploading images from vue-cli to laravel controller

Hi,

I am using vue-cli .i want to upload image to my laravel controller.But my controller is always returning null value.Before posting its showing image but controller is getting null.I am using CORS Middleware.Any help will be appreciated.Thanks in advance.

My code is,

    <div class="animated fadeIn">
            <div class="container">
                <b-row class="justify-content-center">
                     <b-col md="8">
                      <b-card
                            header="<i class='fa fa-paper-plane'></i>&nbsp;&nbsp;Add Loction"
                    >
                      <!-- Create Listing Form -->
                      <b-form    enctype="multipart/form-data" @submit.prevent="create"
                         @keydown="form.errors.clear($event.target.name)" 
                            >
                    <!-- Profile Picture -->
                            <b-form-group
                              label="Profile Picture"
                              :label-cols="3"
                              :horizontal="true">
                                <b-form-file  id="image" name="image"
                                     @change="onImageChange"  
                                     plain="true"
                                     ref="file-input"
                                    v-model="form.file"
                                     :accept="image/png|image/jpeg|image/jpg|text/plain">
                        </b-    form-file>
                                <b-form-invalid-feedback
                                 v-if="form.errors.has('file')">
                                  {{ form.errors.get('file') }}
                                </b-form-invalid-feedback>
                         </b-form-group>
                            <b-button variant="primary" class="px-4" type="submit" >
                    Create Listing</b-button>
                    </b-form> 
                </b-card>
              </b-col>
         </b-row>
    </div>
  </div>
</template>

<script type="text/javascript">
import Form from '@/helpers/Form.js'
export default {
  data: () => ({
    form: new Form({
  file:''
     })
 }),
 methods: {
   onImageChange(e){
    let files = e.target.files[0];
       // console.log(e.target.files[0]);
      // console.log(files.length);
     this.form.file=e.target.files[0];
   },
   create () {
       var formData = new FormData();
       const config = {
      headers: { 
        'Content-Type': 'multipart/form-data' }
       };
     formData.append('file',this.form.file);
    // console.log(formData.get('file'));
     this.form.post('/api/listings')
    .then(data => {
          console.log(data.data);
          //this.$router.push('/listings')
        })
        .catch(errors => {
        })
    }
 }
}
</script>```


```My Form.js code is

import axios from 'axios'
import Errors from '@/helpers/Errors.js'
import store from '@/store'

class Form {
  constructor (data) {
    this.originalData = data

    for (let field in data) {
      this[field] = data[field]
    }

    this.errors = new Errors()
  }

  data () {
    let data = {}
    for (let field in this.originalData) {
      data[field] = this[field]
    }
    return data
  }

  get (url) {
    return this.submit(url, 'get')
  }

  post (url) {
   return this.submit(url, 'post')
  }

  patch (url) {
    return this.submit(url, 'patch')
  }

  delete (url) {
    return this.submit(url, 'delete')
  }

  submit (url, actionType) {
   //console.log(this.data());
    const config = {
          headers: { 
           
            'Content-Type': 'multipart/form-data' }
        };
    let apiUrl = store.getters.api.apiUrl
    let apiToken = store.getters.user.api_token
    //let outletId = store.getters.outlet.id
    
    axios.defaults.headers.common['Authorization'] = 'Bearer ' + apiToken
  ///axios.defaults.headers.common['Content-Type'] = 'multipart/form-data'
    return new Promise((resolve, reject) => {
      axios[actionType](apiUrl + url, this.data(),config)
        .then(response => {
          this.onSuccess(response.data)

          resolve(response.data)
        })
        .catch(error => {
          this.onFail(error.response.data.errors)
         // console.log(error.response.data.errors);
          reject(error.response.data.errors)
        })
    })
  }

  onSuccess () {

  }

  onFail (errors) {
    this.errors.record(errors)
  }
}

export default Form```