javascript - Dropzone JS - 在没有文件的情况下更新和处理 formData（相同的问题不同的情况）

Question

我创建了一个用于两个功能（添加新和编辑）的表单（在模式内），当然还有一个使用 dropzone 的上传图像表单。我上传新图像和其他表单数据没有问题，但是当涉及到“编辑”现有数据/图像时，这是我到目前为止所做的：当我按下编辑按钮时，它会弹出一个模式，在我的 JS 中确实设置了一个变量'edit_mode = true'以便稍后使用DropzoneJS检查，显示可用的图片和数据但是DropzoneJS我将它设置为“显示：无”。

这是我的脚本：

Dropzone.autoDiscover = false;
    function callDropzone(id = '') {
        let token = $('input[name="_token"]').val();

        var previewNode = document.querySelector("#template");
        previewNode.id = "";
        var previewTemplate = previewNode.parentNode.innerHTML;
        previewNode.parentNode.removeChild(previewNode);

        var myDropzone = new Dropzone(".dropzonedragndrop", {
            url: "/admin/save-banner/" + id,
            thumbnailWidth: 150,
            thumbnailHeight: 80,
            parallelUploads: 50,
            previewTemplate: previewTemplate,
            acceptedFiles: 'image/jpeg,.jpeg,.jpg',
            uploadMultiple: false,
            maxFiles: 2,
            autoProcessQueue: false, // Make sure the files aren't queued until manually added
            previewsContainer: "#previews", // Define the container to display the previews
            // clickable: ".fileinput-button", // Define the element that should be used as click trigger to select files.
            params: {
                '_token': token,
            },
            init: function(){
                myDropzone = this;
                $(".submitAds").on('click', function(event){
                    event.preventDefault();
                    if(window.edit_mode == false) {
                        if (!myDropzone.files || !myDropzone.files.length) {
                            toastr.error("Please add an Image!");
                        }
                    } else {
                        if(window.change_image == true) {
                            if (!myDropzone.files || !myDropzone.files.length) {
                                toastr.error("Please add an Image!");
                            }
                        } else {
                            imagesList = [];
                            var mockFile = { 
                                id: '', 
                                name: "", 
                                filename: "", 
                                size: '',
                                type: "image/jpg",
                                status: Dropzone.QUEUED, 
                                accepted: true,
                                upload: {} 
                            };
                            myDropzone.emit("addedfile", mockFile);

                            myDropzone.createThumbnailFromUrl(mockFile, imagesList, "", "");
                            myDropzone.files.push(mockFile);
                            myDropzone.emit("complete", mockFile);
                        }
                    }
                    mst_user_id         = $( '#client_name' ).val() == '' ? null : $( '#client_name' ).val();
                    banner_location     = $( '#banner_location' ).select2('data')[0].text;
                    start_show_date     = $( '#start-show-date' ).data('date') == undefined ? null : $( '#start-show-date' ).data('date');
                    end_show_date       = $( '#end-show-date' ).data('date') == undefined ? null : $( '#end-show-date' ).data('date');
                    external_link       = $( '#external-link' ).val();
                    banner_type         = 'advertisement';
                    
                    myDropzone.processQueue();
                    
                });

                this.on("sending", function(file, xhr, formData) {
                    console.log('test', mst_user_id);
                    formData.append('mst_user_id', mst_user_id);
                    formData.append('banner_location', banner_location);
                    formData.append('start_show_date', start_show_date);
                    formData.append('end_show_date', end_show_date);
                    formData.append('banner_type', banner_type);
                    formData.append('external_link', external_link);
                });

                this.on("error", function(files, response) {
                    $.each(myDropzone.files, function(i, file) {
                        file.status = "queued";
                    });
                    $.each(response.message, function(i, message) {
                        toastr.error(message);
                    });
                    $('.error.text-danger').remove();
                });

                this.on("successmultiple", function() {
                    this.removeAllFiles(true);
                    resetForm();

                    console.log('rejected: ', this.getRejectedFiles());
                    $("#advertisement").modal('hide');
                    toastr.success('Banner Uploaded');
                });
            }
        });
    }

我在现有图像的正下方添加了一个“更改图像”按钮。当它被按下时，它将显示 DropzoneJS 并设置 var "change_image = true"。提交时，我检查 if (edit_mode = true) 然后检查 if(change_image = true) { 必须有文件要提交} else { 可以不提交文件，只有 formData }。

错误：

“未捕获的 TypeError：无法在 'FormData' 上执行 'append'：参数 2 不是 'Blob' 类型。”

当我问这个问题时，我使用了最新版本，即 v5.9.3。

我不太确定这将是我所做的一个好方法。我可能知道变量是不必要的。但是 Afaik，如果我用谷歌搜索这个问题，它会将同样的问题带回到 Year 2013，我很确定该解决方案已经在当前版本上更新。

我的目标是创建具有两个功能（添加新功能和编辑功能）的相同表单，无需刷新页面即可完美运行。仅在提交新数据时才需要图像。但是当它处于编辑模式时，即使没有图像更改，它也应该能够提交。

我怎样才能做到这一点？我对任何其他方式持开放态度，或者也许有更优雅的方式来做到这一点？我在文档中找不到它。还是我错过了什么？

标签： javascriptlaraveldropzone.jsdropzone