vue.js 中的文件上传进度条

【问题标题】：File upload progress bar in vue.jsvue.js 中的文件上传进度条
【发布时间】：2018-09-02 02:09:00
【问题描述】：

我正在尝试开发一个 Vue.js 应用程序。在这方面，我正在此应用程序中上传文件。现在我想为该文件上传功能开发一个进度条。我正在尝试遵循教程。在这里，我得到了用于上传文件的 axios 库。代码如下

axios.post("/upload.php",fd,{
    onUploadProgress: function() {
       //code here
    }
})

但我使用的是vue-resource。如何检测vue-resource中的上传进度？

【问题讨论】：

【解决方案1】：

对于vue-resource 将是：

this.$http.post('/upload.php', fd, {
  progress(e) {
    if (e.lengthComputable) {
      console.log(e.loaded / e.total * 100);
    }
  }
});

在开发过程中，除非您限制请求，否则您将看不到进度。查看here，了解如何在 Chrome 中限制请求。

【讨论】：

感谢@Jorj 的回复。我更改了 Throttle，但没有得到任何输出。谢谢。
@abuabu 请尝试在if语句之前登录，看看progress(e)是否被触发
感谢@Jorj 的回复。我试图像下面的{ progress(evt) { console.log('hello') if (evt.lengthComputable) { console.log(evt.loaded / evt.total * 100); } } } 一样登录。但这行不通。这意味着progress() 不会被触发。