Progress bar with axioms

Question

I need to display the file upload status using the progress bar. I use axiosto create http requests. I followed an example from their github page https://github.com/mzabriskie/axios/blob/master/examples/upload/index.html

My code is as follows:

this.store().then(() => {
    var form = new FormData();
        form.append('video', this.file);
        form.append('uid', this.uid);

        axios.post('/upload', form, {
            progress: (progressEvent) => {
                    if (progressEvent.lengthComputable) {
                       console.log(progressEvent.loaded + ' ' + progressEvent.total);
                       this.updateProgressBarValue(progressEvent);
                    }
           }
       })                   
});

However, it does not execute at all console.log(progressEvent.loaded + ' ' + progressEvent.total);and does not causethis.updateProgressBarValue(progressEvent);

How can I solve this problem?

I am new to javascript world.

Answer 1

I have found the answer. Event name onUploadProgressand i usedprogress

Answer 2

, "", Axios . onUploadProgress onDownloadProgress

totalLength, : , lengthComputable, , ( ), , , .

! , .

, "" , setInterval, . , 100%. CSS, , ""

( GitHub), .

                onUploadProgress: (progressEvent) => {
                const totalLength = progressEvent.lengthComputable ? progressEvent.total : progressEvent.target.getResponseHeader('content-length') || progressEvent.target.getResponseHeader('x-decompressed-content-length');
                console.log("onUploadProgress", totalLength);
                if (totalLength !== null) {
                    this.updateProgressBarValue(Math.round( (progressEvent.loaded * 100) / totalLength ));
                }
            });

Answer 3

This is a very convenient library to achieve this without too many encodings - https://github.com/rikmms/progress-bar-4-axios/