Barre de progression avec objet Axios

Bonjour,

Je cherche à faire une barre de progression d’un upload de fichier avec Axios.

Tout est ok avec l’envoi et le retour du serveur.

Le problème c’est que je n’arrive pas à renvoyer ce pourcentage de progression (qui se calcule correctement) depuis mon objet importé.

Mon fichier upload.js:

import axios from 'axios'

const baseUrl = 'http://localhost:80/upload.php'

const config = {
  Headers: {'Content-Type': 'multipart/form-data'},
  onUploadProgress: progressEvent => {
    return parseInt(Math.round((progressEvent.loaded / progressEvent.total) * 100))
  }
}

export default {
  send (data) {
    return axios.post(baseUrl, data, config)
  }
}

Mon component Vue:

<template>
  <div>
    <label>File:</label>
    <input type="file" id="file" ref="file" @change="changeFile()" />
    <button @click="submit()">Upload</button>
    <br />
    <progress max="100" :value.prop="uploadPercentage"></progress>
  </div>
</template>

<script>
  import upload from '../services/upload.js'
  export default {
    name: 'Upload',
    data: () => ({
      file: null,
      uploadPercentage: 0
    }),
    methods: {
      submit () {
        const formData = new FormData()
        formData.append('file', this.file)
        upload.send(formData)
        .then(res => {
          console.log(res.data)
        })
        .catch(() => {
          console.log('Failure')
        })
      },
      changeFile () {
        this.file = this.$refs.file.files[0]
      }
    }
  }
</script>

Comment, depuis la méthode submit du component, récupérer l’info renvoyée par le onUploadProgress pour mettre à jour la data uploadPercentage?

Merci d’avance.

Salutations.

en passant onUploadProgress comme une callback par ex

upload.send(formData, (progressEvent) => {
      this.uploadPercentage = parseInt(Math.round((progressEvent.loaded / progressEvent.total) * 100))
})

(note : la arrow fonction ici est très importante pour que this soit bien le composant)

export default {
  send (data, onUploadProgress) {
    return axios.post(baseUrl, data, { ...config, onUploadProgress })
  }
}

Merci pour cette solution!