带有 axios 的进度条

新手上路,请多包涵

我必须使用进度条显示文件的上传状态。我正在使用 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);

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

原文由 Pritam Bohra 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 936
2 个回答

我找到了答案。事件的名称是 onUploadProgress 我使用的是 progress

原文由 Pritam Bohra 发布,翻译遵循 CC BY-SA 3.0 许可协议

我认为问题出在“进度”事件本身,正如您可以在 Axios 配置 本身中看到的那样,不支持进度。相反,你应该听 onUploadProgressonDownloadProgress

另一个问题是获取 totalLength,我尝试通过以下方式执行此操作:查看 lengthComputable,如果不是,请尝试从标头中获取长度,如果不是,请尝试获取解压缩的内容长度(作为最后的手段),那么您应该能够做到任何你想要的价值。

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

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

如果您需要更多代码,我制作了一个类似的加载程序( 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 ));
                }
            });

原文由 Samuel Bergström 发布,翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题