【问题标题】: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中的上传进度?

【问题讨论】:

    标签: vuejs2 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() 不会被触发。
    猜你喜欢
    • 2011-02-24
    • 1970-01-01
    • 1970-01-01
    • 2013-05-21
    • 2011-09-11
    • 2017-07-28
    • 2020-11-13
    • 2010-10-10
    相关资源
    最近更新 更多