Dropzone.js多文件上传至服务器重复文件问题求助

一、核心问题定位 #

1. 重复文件未被拦截：仅靠文件名判断重复不可靠（不同文件可能同名，同一文件可能被重复选中），且未在文件添加阶段做校验。
2. Sortable与Dropzone队列不同步：你调用的myDropzone.sortable('update')是错误的（Dropzone本身没有这个方法），导致DOM排序后，Dropzone内部的文件队列顺序未更新，可能引发上传逻辑混乱。
3. 文件名传递方式有隐患：直接将文件名数组转成字符串传递，若文件名含特殊字符（如逗号）会导致解析错误。

二、具体解决方案 #

1. 拦截重复文件（添加阶段校验） #

利用文件的size+lastModified作为唯一标识（这两个属性组合能99%确保文件唯一性），在addedfile事件中检查是否已存在于队列，重复则直接移除。

2. 同步Sortable与Dropzone队列顺序 #

在jQuery UI Sortable的stop事件中，根据DOM元素的顺序重新排序Dropzone的files数组，确保队列顺序与用户看到的一致。

3. 优化文件名传递与上传防重复 #

• 用formData.append('filenames[]', filename)的方式传递文件名数组，避免字符串分割问题。
• 上传按钮点击后禁用，直到上传完成，防止用户多次触发上传。

三、修改后的完整代码 #

$(document).ready(function () {
    Dropzone.autoDiscover = false;

    // 初始化Dropzone
    const myDropzone = new Dropzone("div#bestPlaceImgDrop", {
        paramName: "files",
        addRemoveLinks: true,
        uploadMultiple: true,
        autoProcessQueue: false,
        parallelUploads: 50,
        maxFilesize: 5,
        acceptedFiles: ".webp, .jpeg, .jpg",
        url: `${siteUrl}${middlewareType}/places/upload-place-images`,
        clickable: true
    });

    // 1. 拦截重复文件
    myDropzone.on("addedfile", function(file) {
        // 生成文件唯一标识：size + lastModified
        const fileId = `${file.size}-${file.lastModified}`;
        // 检查队列中是否已存在相同标识的文件
        const isDuplicate = Array.from(myDropzone.files).some(existingFile => {
            return `${existingFile.size}-${existingFile.lastModified}` === fileId;
        });
        if (isDuplicate) {
            this.removeFile(file);
            showAlert('warning', '该文件已在上传队列中');
        }
    });

    // 2. 上传前准备：添加CSRF、PlaceID、文件名
    myDropzone.on("sendingmultiple", function (files, xhr, formData) {
        xhr.setRequestHeader('X-CSRF-TOKEN', $('meta[name="csrf-token"]').attr('content'));
        const placeid = $('#placeid').val();
        formData.append('placeid', placeid);
        // 用数组方式传递文件名，避免字符串分割问题
        files.forEach(file => {
            formData.append('filenames[]', file.name);
        });
        $('#preloader').show();
        // 禁用上传按钮，防止重复点击
        $("#addPlaceImgsBtn").prop('disabled', true);
    });

    // 3. 上传成功处理
    myDropzone.on("successmultiple", function (files, response) {
        if (response.success) {
            Swal.fire("Success", '图片上传成功！', "success").then(() => {
                window.location.reload();
            });
        } else {
            showAlert('error', '图片上传失败');
        }
    });

    // 4. 上传错误处理
    myDropzone.on("errormultiple", function (files, errorMessage) {
        showAlert('error', `图片上传失败：${errorMessage}`);
    });

    // 5. 上传完成（单个文件完成）
    myDropzone.on("complete", function (file) {
        myDropzone.removeFile(file);
        // 所有文件都完成后隐藏加载器、恢复按钮状态
        if (myDropzone.getQueuedFiles().length === 0 && myDropzone.getUploadingFiles().length === 0) {
            $('#preloader').hide();
            $("#addPlaceImgsBtn").prop('disabled', false);
        }
    });

    // 6. 触发上传按钮
    $("#addPlaceImgsBtn").on("click", function () {
        if (myDropzone.getQueuedFiles().length === 0) {
            showAlert('warning', '请先选择要上传的图片');
            return;
        }
        myDropzone.processQueue();
    });

    // 7. 图片排序：同步DOM与Dropzone队列
    $("#bestPlaceImgDrop").sortable({
        items: '.dz-preview',
        cursor: 'move',
        opacity: 0.5,
        containment: '#bestPlaceImgDrop',
        distance: 20,
        tolerance: 'pointer',
        stop: function () {
            // 根据DOM顺序重新排序Dropzone的files数组
            const sortedFileIds = $(this).find('.dz-preview').map(function() {
                return $(this).data('dz-uid');
            }).get();
            
            myDropzone.files = sortedFileIds.map(uid => {
                return myDropzone.files.find(file => file.uid === uid);
            }).filter(Boolean);
        }
    }).disableSelection();
});

四、额外优化建议 #

• 服务器端二次校验：即使前端做了拦截，服务器也要对接收的文件做唯一性校验（比如根据文件哈希或placeid+文件名），防止恶意重复上传。
• 文件哈希校验（可选）：如果需要更严格的唯一性，可在前端用FileReader读取文件内容生成MD5哈希，但大文件会影响性能，建议仅对小文件使用。
• 错误信息细化：在errormultiple中展示具体的错误信息，方便排查问题。

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