Dropzone v6能否等待Promise解析完成后再处理上传文件？

解决这个问题的核心是禁用Dropzone的自动处理队列功能，等你的异步方法执行完成后，再手动触发文件处理流程。具体实现步骤如下：

1. 初始化Dropzone时设置autoProcessQueue: false，阻止组件自动启动上传流程
2. 在addedfile事件的异步方法中，完成Promise解析后，手动调用处理方法触发上传

修改后的代码示例 #

首先是Dropzone初始化配置：

const myDropzone = new Dropzone("#your-dropzone-element", {
  autoProcessQueue: false, // 关键配置：禁用自动处理队列
  // 其他自定义配置项...
  init: function () {
    this.on("addedfile", (file) => someAsyncMethod(file, this));
    this.on("processing", file => {
        console.log("现在只会在异步方法完成后触发！");
    });
  }
});

然后调整someAsyncMethod，传入文件实例和Dropzone对象，完成异步操作后手动触发处理：

const someAsyncMethod = async (file, dropzoneInstance) => {
    const url = "https://my-service/api/some-method";
    const result = await fetch(url);
    // 这里编写处理返回结果的逻辑
    
    // 手动触发单个文件的上传，若要批量处理队列可改用processQueue()
    dropzoneInstance.processFile(file);
};

额外说明 #

• 如果需要等待多个文件的异步操作全部完成后再批量上传，可以维护一个Promise数组，通过Promise.all()监听所有异步任务完成后，调用dropzoneInstance.processQueue()
• 若异步操作失败，可根据业务逻辑决定是否终止上传或触发重试逻辑

内容的提问来源于stack exchange，提问作者theeDude