Question

我在渐进式数据提交表单中使用了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
}

有没有办法实现这个目标？

Answer 1

如果你想在移动到下一个屏幕之前等待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()所有文件时在一个请求中上传。

Dropzone.js：等待`processQueue`方法

1 个答案: