时间戳

首页 > 解决方案 > Dropzone.js：等待`processQueue`方法

javascript - Dropzone.js：等待`processQueue`方法

问题描述

我Dropzone.js在渐进式数据提交表单中使用过。为了澄清场景，用户首先输入个人数据，然后单击next，dropzone表单出现在用户上传文件的位置。

为了等待用户完成附加所有必需的文件，我禁用了autoProcessQueue，然后我添加了其他参数以及授权令牌。此时，当用户单击时next，我调用该processQueue()方法，这将导致立即导航到下一个表单，同时在后台上传附件。问题是，在导航到下一页之前，我需要先等待文件上传。例如：

var dropZone = new Dropzone ('[vu-dropzone]', {
    ...
    autoProcessQueue = false,
    params: {
        purpose: 'Registration',
        level: 'A'
    },
    headers: {Authorization: this.$store.getters['user/getToken']}
}); 

//submission method 
// what I'm actually doing
submit(){
  this.dropZone.processQueue();
  // go to next route/form
}

//what I'm after 
async submit(){
    await this.dropZone.processQueue();
     // go to next route/form
}

有什么办法可以做到这一点？

标签： javascriptecmascript-6dropzone.js

解决方案

如果您想在移动到下一个屏幕之前等待 dropzone 上传所有图像，您可能应该使用 dropzone 自己的success或successmultiple事件。

var dropZone = new Dropzone ('[vu-dropzone]', {
    // ...
    autoProcessQueue = false,
    params: {
        purpose: 'Registration',
        level: 'A'
    },
    headers: {Authorization: this.$store.getters['user/getToken']},
    uploadMultiple: true,
    maxFiles: 10,
    parallelUploads: 10,
    init: function() {
        this.on('successmultiple', function(file, response) {
            // Here you can go to next form/route
        }
    }
});

我的建议是您将要允许的最大文件数设置maxFiles为parallelUploads相同的值，这样当您调用时，processQueue()所有文件将在一个请求中上传。

推荐阅读