带有axios的进度条

Question

我必须使用进度条显示文件的上传状态.我正在使用axioshttp请求.我按照他们的github页面中的示例https://github.com/mzabriskie/axios/blob/master/examples/upload/index.html

我的代码看起来像这样:

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);
                    }
           }
       })                   
});

但是,它根本没有执行console.log(progressEvent.loaded + ' ' + progressEvent.total);,也没有调用this.updateProgressBarValue(progressEvent);

我怎么解决这个？

我是javascript世界的新手.

Answer 1

我认为问题在于"progress"事件本身,因为您可以在Axios配置中阅读本身不支持进度.相反,你应该听 onUploadProgress或onDownloadProgress

另一个问题是获取totalLength,我尝试按以下方式执行:查看是否为lengthComputable,如果没有尝试并从头部获取长度,如果没有尝试并获得解压缩的内容长度(作为最后的手段)那么你应该能够做到无论你想要什么价值.

这不是万无一失的实施!只要totalLength不可用,它就会失败.

为了使它更加稳固,您可以使用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 2

我找到了答案.事件的名称是onUploadProgress,我正在使用progress