检测所有 Dropzones 何时已附加到表单

Question

我有一个包含多个拖放区的页面，每个拖放区都为一张图片设置。当用户提交表单时，附加到拖放区的所有图像都会调整大小，然后附加到表单字段的其余部分。

完成后，我通过提取发送表单数据。我需要等待所有图像调整大小并附加，然后发送表格。我该怎么做？

当前代码：

  dropzones.forEach((dropzone, key, dropzones) => {
    let { paramName }  = dropzone.options
    let { resizeWidth }  = dropzone.options
    if (dropzone.files.length > 0){
      dropzone.resizeImage(dropzone.files[0], resizeWidth, null, 'contain', resizeDone, paramName); // note: resizeImage() in dropzone.js has been edited to add paramName
    }
    if (Object.is(dropzones.length - 1, key)) { // this is the final iteration
      console.log('last one') // output before resizing complete
    }
  })

  function resizeDone(newfile, paramName){
    console.log(newfile);
    console.log(paramName);  
    form.append(paramName, newfile);    
  }

在调用 fetch() 之前，我需要以某种方式检测已调整大小并添加了最终图像；

Answer 1

我建议：计算 dropzones 的总数，然后每次将图像附加到表单时增加一个计数器，这样您就知道何时附加了所有图像，然后您可以调用 fetch。

let total = dropzones.length, appended = 0;
dropzones.forEach({//... your code

function resizeDone(newfile, paramName){
    form.append(paramName, newfile);    
    appended++;
    if (appended === total) {
        fetch(//...
    }
}

检测所有 Dropzones 何时已附加到表单

Detect when all Dropzones have been appended to a form

javascript

dropzone.js