title: Progress bar with Vue and Axios object
body: <p>I would like to create an upload progress bar with Axios.</p>
  <p>Everything is working fine with server sending and response.</p>
  <p>The problem is that I don't know how to capture the progress percentage (which is correctly calculated) from my exported object.</p>
  <p>My file upload.js:</p>
  <pre><code>import axios from 'axios'
  
  const baseUrl = 'http://localhost:80/upload.php'
  
  const config = {
    Headers: {'Content-Type': 'multipart/form-data'},
    onUploadProgress: progressEvent =&gt; {
      return parseInt(Math.round((progressEvent.loaded / progressEvent.total) * 100))
    }
  }
  
  export default {
    send (data) {
      return axios.post(baseUrl, data, config)
    }
  }
  </code></pre>
  <p>My Vue component:</p>
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;label&gt;File:&lt;/label&gt;
      &lt;input type=&quot;file&quot; id=&quot;file&quot; ref=&quot;file&quot; @change=&quot;changeFile()&quot; /&gt;
      &lt;button @click=&quot;submit()&quot;&gt;Upload&lt;/button&gt;
      &lt;br /&gt;
      &lt;progress max=&quot;100&quot; :value.prop=&quot;uploadPercentage&quot;&gt;&lt;/progress&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
    import upload from '../services/upload.js'
    export default {
      name: 'Upload',
      data: () =&gt; ({
        file: null,
        uploadPercentage: 0
      }),
      methods: {
        submit () {
          const formData = new FormData()
          formData.append('file', this.file)
          upload.send(formData)
          .then(res =&gt; {
            console.log(res.data)
          })
          .catch(() =&gt; {
            console.log('Failure')
          })
        },
        changeFile () {
          this.file = this.$refs.file.files[0]
        }
      }
    }
  &lt;/script&gt;
  </code></pre>
  <p>How to retreive, from the component <em>submit</em> method, the info sent by the <em>onUploadProgress</em> in order to update the data <em>uploadPercentage</em>?</p>
  <p>Thanks.</p>
  <p>Regards.</p>