javascript - 带有 axios 的进度条

Question

我必须使用进度条显示文件的上传状态。我正在使用 axios 发出 http 请求。我按照他们的 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);

我该如何解决这个问题？？

Answer 1

我认为问题在于“进度”事件本身，正如您在 Axios configuration 中所读到的那样不支持本身的进度。相反，您应该听取 onUploadProgress 或 onDownloadProgress

另一个问题是获取 totalLength，我尝试通过以下方式进行操作:查看 lengthComputable，如果不是，则尝试从 header 中获取长度，如果不是，则尝试获取解压缩的内容长度(作为最后的手段)，那么你应该是能够用这个值做任何你想做的事。

这不是一个万无一失的实现!只要 totalLength 不可用，它就会失败。

为了让它更稳固一点，您可以使用 setInterval 每秒手动增加进度来实现“假”进度。解决 promise 后，手动将进度设置为 100%。如果您使用 CSS 转换实现它，即使进度并不总是“正确”，您也应该得到一个平滑的解决方案

如果您需要更多代码，我制作了一个类似的加载程序 ( GitHub link)。

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