Javascript 带 axios 的进度条
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/44936028/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Progress Bar with axios
提问by Pritam Bohra
I have to display the upload status of the file using a Progress Bar. I am using axiosto make http requests. I followed the example from their github page https://github.com/mzabriskie/axios/blob/master/examples/upload/index.html
我必须使用进度条显示文件的上传状态。我正在使用axioshttp 请求。我按照他们的 github 页面https://github.com/mzabriskie/axios/blob/master/examples/upload/index.html 中的示例进行操作
My code looks like this:
我的代码如下所示：
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 is not executing the console.log(progressEvent.loaded + ' ' + progressEvent.total);at all nor is it calling this.updateProgressBarValue(progressEvent);
但是，它根本没有执行console.log(progressEvent.loaded + ' ' + progressEvent.total);，也没有调用this.updateProgressBarValue(progressEvent);
How can I solve this??
我该如何解决这个问题？？
采纳答案by Pritam Bohra
I found the answer. The name of the event is onUploadProgressand I was using progress
我找到了答案。事件的名称是onUploadProgress，我正在使用progress
回答by Samuel Bergstr?m
I think the problem is with the "progress" event itself, as you can read in Axios configurationitself progress is not supported. instead you should listen to onUploadProgressor onDownloadProgress
我认为问题出在“progress”事件本身，因为您可以在Axios 配置本身中阅读不支持进度。相反，你应该听 onUploadProgress或onDownloadProgress
Another issue is getting the totalLength which i tried doing the following way: look if lengthComputable, if not try and get the length from the header, if not try and get the decompressed content length (as last resort) then you should be able to do whatever you want with the value.
另一个问题是获取我尝试通过以下方式执行的 totalLength：查看是否为 lengthComputable，如果不尝试从标题中获取长度，如果不尝试获取解压缩的内容长度（作为最后的手段）那么你应该能够做到任何你想要的价值。
This is not a fool proof implementation!it will fail whenever the totalLength is not available.
这不是一个万无一失的实现！只要 totalLength 不可用，它就会失败。
In order to make it a bit more solid you could implement "fake" progress using setInterval to increment the progress manually every second. Once the promise is resolved, set the progress manually to 100%. if you implement it using CSS transitions you should get a smooth solution even if the progress is not always "correct"
为了使它更可靠，您可以使用 setInterval 每秒手动增加进度来实现“假”进度。承诺解决后，将进度手动设置为 100%。如果您使用 CSS 过渡来实现它，即使进度并不总是“正确”，您也应该得到一个平滑的解决方案
I made a similar loader (GitHub link) if you need more code.
如果您需要更多代码，我制作了一个类似的加载器（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 ));
}
});
回答by Sohail
This is a very handy library for achieving this without too much coding - https://github.com/rikmms/progress-bar-4-axios/
这是一个非常方便的库，无需太多编码即可实现这一目标 - https://github.com/rikmms/progress-bar-4-axios/
