Dropzone.js上传超大文件时触发queuecomplete事件引发页面跳转的解决方案咨询

我完全懂你现在的困扰——明明已经在accept函数里对超大文件做了移除+弹窗提示的处理，结果queuecomplete事件还是被触发，直接把页面跳走了，之前的提示用户可能都没来得及看完，这体验确实糟透了。

咱们来一步步解决这个问题：

问题根源 #

核心问题在于你当前的处理逻辑只是直接移除了不符合要求的文件，但没有正确通知Dropzone「这个文件是被拒绝的，不算完成的上传任务」。Dropzone的队列判断逻辑里，哪怕你移除了文件，它还是会认为队列里的任务都处理完了，于是触发queuecomplete。

具体修改方案 #

1. 修正accept函数的错误处理

在移除不符合要求的文件前，一定要调用done("错误信息")来告诉Dropzone这个文件被拒绝了，而不是直接移除就完事。另外加个短暂的延迟再移除文件，避免和Dropzone的内部状态更新冲突：

accept: function(file, done) {
    var thumbnail = $('.dropzone .dz-preview.dz-file-preview .dz-image:last');
    // 文件图标渲染逻辑保持不变
    switch (file.type) {
      case 'application/pdf':
        thumbnail.css('background', 'url(https://upload.wikimedia.org/wikipedia/commons/thumb/9/94/PDF_icon_-_grey-red_-_16px.svg/120px-PDF_icon_-_grey-red_-_16px.svg.png?20210526135026)');
        break;
      case 'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
        thumbnail.css('background', 'url(https://upload.wikimedia.org/wikipedia/commons/f/fb/.docx_icon.svg)');
        break;
      case 'application/vnd.ms-excel':
            thumbnail.css('background', 'url(https://upload.wikimedia.org/wikipedia/commons/thumb/1/15/Xls_icon_%282000-03%29.svg/1024px-Xls_icon_%282000-03%29.svg.png)');
        break;
      default:
        break;
    }

    if (file.size > this.options.maxFilesize * 1024 * 1024) {
        // 第一步：通知Dropzone该文件被拒绝
        done(`El archivo '${file.name}' excede el tamaño máximo permitido (${this.options.maxFilesize}Mb).`);
        // 延迟移除文件，确保Dropzone完成错误状态标记
        setTimeout(() => {
            thisDropzone.removeFile(file);
        }, 100);
        // 弹窗提示用户
        $("#aviso").text(`El archivo '${file.name}' excede el tamaño máximo permitido (${this.options.maxFilesize}Mb).`);
        $("#myModalAviso").modal("show");
    }
    else if (checkFileName(file.name)) {
        done(`El archivo '${file.name}' no se admite debido a que el nombre del archivo contiene un punto.`);
        setTimeout(() => {
            thisDropzone.removeFile(file);
        }, 100);
        $("#aviso").text(`El archivo '${file.name}' no se admite debido a que el nombre del archivo contiene un punto.`);
        $("#myModalAviso").modal("show");
    }
    else{
        done(); // 文件符合要求，允许进入上传队列
    }
}

2. 给queuecomplete事件加「安全锁」

原来的queuecomplete是只要队列处理完就跳转，现在我们要加个判断：只有当没有被拒绝的文件，且所有有效文件都完成上传时，才执行页面跳转：

myDropzone.on("queuecomplete", function() {
    // 获取被拒绝的文件数量、待上传/正在上传的文件数量
    const rejectedCount = this.getRejectedFiles().length;
    const pendingCount = this.getUploadingFiles().length + this.getQueuedFiles().length;

    // 只有完全没有被拒绝的文件，且所有有效文件都上传完成时才跳转
    if (rejectedCount === 0 && pendingCount === 0) {
        let detalle = $("#detalle").val();
        if(detalle === "true"){
            window.location.href = `/someUrl/${$("#id").val()}`;
        }
        else{
            window.location.href = "/someUrl/";
        }
    }
    // 否则不做跳转，留在当前页面让用户处理
});

3. 可选：监听error事件做兜底

可以额外加个error事件监听，确保所有被拒绝的文件都能被正确清理，避免遗留无效任务：

myDropzone.on("error", function(file, message) {
    // 延迟移除错误文件，和accept里的逻辑保持一致
    setTimeout(() => {
        this.removeFile(file);
    }, 100);
});

额外小提示 #

你原来init函数里的thisDropzone = this;最好改成用块级变量，比如：

init: function () {
    const that = this;
    // 后续需要用的时候就用that代替thisDropzone
},

这样可以避免全局变量污染，减少潜在的逻辑冲突。

备注：内容来源于stack exchange，提问作者icortazar