vue.js - vue-dropzone totaluploadprogress 无法正常工作

Question

我正在使用https://rowanwins.github.io/vue-dropzone/docs/dist Vue2-Dropzone来上传文件。一切正常，除了总上传进度值的计算达到 100%，然后在每个文件上传时从 0% 开始。

我试图用 this.$refs.myVueDropzone.updateTotalUploadProgress() 添加文件添加事件来修复它

. 但不能按预期工作。任何解决方案将不胜感激。

Answer 1

一个老问题，但面对同样的问题，我被迫找到解决方案，这里适合所有感兴趣的人。我为长的属性名称道歉:-)

我正在收听 vue2-dropzone 的以下 2 个事件：vdropzone-upload-progress和vdropzone-file-added

<div v-html="'Progress: '+ uploadProgress"></div>

<dropzone id="upload_dropzone" ref="upload_dropzone" :options="dropzoneOptions"
  @vdropzone-success="dropzoneOnSuccess"
  @vdropzone-upload-progress="dropzoneUploadProgress" 
  @vdropzone-file-added="dropzoneFileAdded"></dropzone>

我的数据对象中有 3 个附加属性：

data: ()=>{
   ....
   dropzoneTotalFilesize:0,
   dropzoneUploadedFilesize:0,
   dropzoneCurrentUpload:0
 }
},

我有一个计算属性：

computed:{
  uploadProgress(){
    return Math.round((this.dropzoneUploadedFilesize + this.dropzoneCurrentUpload) / this.dropzoneTotalFilesize * 100);
  }
 },

然后是我的事件监听器，在我上面的模板中调用

methods:{
  dropzoneFileAdded(file){
    this.dropzoneTotalFilesize += file.size;
  },
  dropzoneUploadProgress(file, totalBytes, totalBytesSent){
    this.dropzoneCurrentUpload = totalBytesSent; // write totalBytes to dropzoneCurrentUpload
    if(file.size <= totalBytesSent){
        this.dropzoneCurrentUpload = 0; // reset current upload bytes counter
        this.dropzoneUploadedFilesize += totalBytesSent; // add finished file to total upload
    },
    .........
},

也许可以用更少的代码来完成同样的事情，但是这个定义适用于单个文件上传以及多个文件上传。

我希望我可以帮助某人，并帮助保持 VueJS 的竞争力