Question

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

我试图修复它这个。$ refs.myVueDropzone.updateTotalUploadProgress（）添加文件添加了活动

。但是没有按预期工作。任何解决方案都将受到高度赞赏。

Answer 1

一个古老的问题，但是面对同样的问题，我不得不寻找解决方案，这是每个有兴趣的人的解决方案。我为很长的属性名称表示歉意：-）

我正在听vue2-dropzone的以下两个事件：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无法正常工作

1 个答案: