Dropzone.js 库多个文件上传到服务器问题

Question

我设置了一个 Dropzone 实例，允许用户上传某个地点的多个图像。文件正在使用 AJAX 请求发送到服务器。我已经实现了事件处理程序，例如

sendingmultiple

、

successmultiple

、

errormultiple

和

complete

来管理文件上传过程。此外，我还提供了可排序功能，允许用户重新排列上传的图像。

下面是Js代码：

`$(document).ready(function () {
    Dropzone.autoDiscover = false;
    let 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
    });

    myDropzone.on("sendingmultiple", function (files, xhr, formData) {
        xhr.setRequestHeader('X-CSRF-TOKEN', $('meta[name="csrf-token"]').attr('content'));
        let filenames = [];
        files.forEach(function (file) {
            filenames.push(file.name);
        });
        const placeid = $('#placeid').val();
        formData.append('filenames', filenames);
        formData.append('placeid', placeid);
        $('#preloader').show();
    });

    myDropzone.on("successmultiple", function (files, response) {
        if (response.success) {
            Swal.fire("Success", 'Image(s) Uploaded Successfully!', "success").then(function () {
                window.location.reload();
            });
        } else {
            showAlert('error', 'Image(s) Uploading failed');
        }
    });

    myDropzone.on("errormultiple", function (files, errorMessage) {
        showAlert('error', 'Image(s) Uploading failed');
    });

    myDropzone.on("complete", function (file) {
        $('#preloader').hide();
        myDropzone.removeFile(file);
    });

    $("#addPlaceImgsBtn").on("click", function () {
        console.log("-- upload btn click --");
        myDropzone.processQueue();
    });

    $(function () {
        $("#bestPlaceImgDrop").sortable({
            items: '.dz-preview',
            cursor: 'move',
            opacity: 0.5,
            containment: '#bestPlaceImgDrop',
            distance: 20,
            tolerance: 'pointer',
            stop: function (event, ui) {
                myDropzone.sortable('update');
            }
        });

        $("#bestPlaceImgDrop").disableSelection();
    });
});

`

但是，我遇到了重复文件上传到服务器的问题。我怀疑这个问题可能与我在上传过程中处理文件名的方式有关。对于如何解决此问题并确保仅上传唯一文件的任何见解或建议，我将不胜感激。

任何有关改进代码结构或有效处理文件上传过程的帮助或指导将不胜感激。预先感谢您的帮助。

我已经尝试了网上研发过程中找到的所有可能的解决方案，但没有成功。

Answer 1

如果没有后端实际上传功能的代码，提供解决方案可能会很困难。此外，管理重复文件不是 Dropzone 的责任。

按如下方式考虑问题：

• Dropzone 是一个前端库，可促进更具吸引力的文件上传。
• 实现 Dropzone 时，您需要提供用于上传的后端 URL（在您的情况下：url: siteUrl + middlewareType + "/places/upload-place-images"）。
• Dropzone可以上传多个文件；有些可能上传成功，有些则可能失败。
• Dropzone 能够识别成功/错误，并可以显示这些结果（因此有complete、errorMultiple 或successMultiple 事件）。

因此，当 Dropzone 发起文件上传时，您的后端应该检查是否已存在同名文件。如果是这样，它应该返回一条错误消息。然后，Dropzone 将识别此错误并显示它，从而防止后端出现重复文件。