связать данные для axios onUploadProgress в vue js

Question

Я новичок в Vuejs.Пожалуйста, помогите мне .Это мой класс LevelApi для обработки операций CRUD для объекта уровня в моей базе данных.функция create этого класса получает данные формы и отправляет их в Node js Api, а затем возвращает ответ.В моем компоненте AddLevel, когда пользователь отправляет форму, я вызываю этот метод и передаю данные формы, которые содержат один файл для загрузки в коллекцию Level в mongodb.

import axios from 'axios'
const API_URL = 'http://example:8080/api/level/'

export default class LevelApi {

  create (formData) {
   return axios.post('http://example.com/api/level/', formData, {

      headers: { 'Authorization': 'Bearer ' + localStorage.getItem('jwt'), 'content-type': 'multipart/form-data' },
      onUploadProgress: function (progressEvent) {
        this.uploadPercentage = parseInt(Math.round((progressEvent.loaded * 100) / progressEvent.total))
      }.bind(this)

    })
 }

И ниже мой компонент AddLevel.

<template>
  <div>
    <form>

      <div class="form-group">
        <label>please choose image for this level</label>
        <input type="file" id="file" ref="myFiles" @change="previewFiles">
      </div>

      <button @click.prevent="storeLevel">add level</button>

    </form>
        <progress-bar v-bind:val="getPercentage" max="100" :text="uploadPercentageWithPercent"></progress-bar>

    </div>
  </div>
</template>

<script>

  import LevelApi from '../../services/api/level/LevelApi' // importing the LevelApi class that I mentioned above

  const levelApi = new LevelApi()

  export default {
    name: 'AddLevel',
    data () {
      return {
        files: {},
        uploadPercentage: 0,
      }
    },
    methods: {
      storeLevel () {

        var formData = new FormData()

        formData.append('file', this.files)

         levelApi.create(formData).then((response)=>{

            console.log(response.data)

         });

      },
      previewFiles () {
        this.files = this.$refs.myFiles.files[0]
      },
    },
    computed: {

      uploadPercentageWithPercent () {
        return this.uploadPercentage.toString().concat('%')
      },
      getPercentage () {
        return this.uploadPercentage
      },
      resetPercentage () {
        this.uploadPercentage = 0
      }

    },
  }
</script>

<style scoped>

</style

Все в порядке, файл загружается, но индикатор выполнения не показывает данные uploadPercentage.но когда я сохраняю в логе этот uploadPercentage, он увеличивается до 100%.Я изменил свой код ниже, и проблема решена.код ниже не использует класс ApiLevel сейчас.теперь индикатор выполнения показывает процент загрузки.В чем проблема с моим классом ApiLevel.Почему индикатор выполнения не показывает процент загрузки, хотя значение uploadPercentage изменяется в функции console.log.

var formData = new FormData()

    formData.append('file', this.files)

    this.$http.post('http://example.com/api/level/', formData, {

      headers: { 'Authorization': 'Bearer ' + localStorage.getItem('jwt'), 'content-type': 'multipart/form-data' },
      onUploadProgress: function (progressEvent) {
        this.uploadPercentage = parseInt(Math.round((progressEvent.loaded * 100) / progressEvent.total))
      }.bind(this)

    }).then((response) => {

      }

    })