vue-dropzone totaluploadprogress 无法正常工作

Question

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

I have tried to fix it with this.$refs.myVueDropzone.updateTotalUploadProgress() adding on file added event

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

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 的竞争力

vue-dropzone totaluploadprogress 无法正常工作

vue-dropzone totaluploadprogress does not work properly

dropzone.js

vue.js

vuejs2

dropzone

vue2-dropzone