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

Question

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

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

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

Answer 1

对于 vue-resource 将是：

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

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

File upload progress bar in vue.js