Dropzone 显示现有文件

如何解决Dropzone 显示现有文件

我正在使用 Dropzone js 将图像上传到我的应用程序。这在插入页面上工作正常，但我需要能够编辑记录并添加或更改与记录关联的现有图像。整个应用程序使用 Laravel。

我正在尝试使用以下代码来实现这一点，但我不是 JS 专家，并且似乎无法使其正常工作，例如在我的设置中 displayExistingFile 未被识别为函数。我将如何根据现有代码执行此操作？

我正在尝试使用 var image_data 传入 init 函数中的现有文件；

   var uploadedDocumentMap = {};
            var uploadedOrder = 0;
            $('#advert_images_zone').dropzone({
                url: '{{ route('adverts.storeMedia') }}',method: 'post',maxFilesize: 12,// MB
                maxFiles: 6,dictDefaultMessage: 'Drop images anywhere to upload (6 images Max)',acceptedFiles: ".jpeg,.jpg,.png,.gif",thumbnailWidth: 100,thumbnailHeight: 100,addRemoveLinks: true,previewsContainer: ".dropzone-previews",previewTemplate: '<li><figure><img data-dz-thumbnail /><i title="Remove Image" class="icon-trash" data-dz-remove ></i></figure></li>',headers: {
                    'X-CSRF-TOKEN': "{{ csrf_token() }}"
                },success: function (file,response) {
                    $('form').append('<input type="hidden" name="advert_images[]" value="' + response.name + '">');
                    uploadedOrder++;
                    uploadedDocumentMap[file.name] = {name:response.name,order:uploadedOrder}
                   // console.log(uploadedDocumentMap);
                    $('#image_order').val(JSON.stringify(uploadedDocumentMap));
                },removedfile: function (file) {
                    var name = ''
                    if (typeof file.file_name !== 'undefined') {
                        name = file.file_name
                    } else {
                        name = uploadedDocumentMap[file.name].name
                    }

                    var url = '{{ route('adverts.removeMedia') }}';

                    $.ajax({
                        type: "POST",url : url,data: {name : name,"_token": "{{ csrf_token() }}",}
                    }).done(function (data) {
                        file.previewElement.remove();
                        delete uploadedDocumentMap[file.name];
                        $('#image_order').val(JSON.stringify(uploadedDocumentMap));
                        $('form').find('input[name="advert_images[]"][value="' + name + '"]').remove();
                    }).fail(function () {
                        console.log('Image could not be removed');
                    });
                },init: function() {
                    var myDropzone = this;
                    this.on("maxfilesexceeded",function(file){
                        file.previewElement.remove();
                    });

                    var image_data = JSON.parse($('#image_json').val());

                    $.each(image_data,function(key,value)
                    {
                        var mockFile = {
                            name: value.name,size: value.size
                        };

                        var path = "{{asset ('storage/ad_images/')}}";
                        console.log(mockFile);
                        myDropzone.options.addedfile.call(myDropzone,mockFile);
                        myDropzone.options.thumbnail.call(myDropzone,mockFile,path + "/thumbnails/" + value.name);
                        myDropzone.options.complete.call(myDropzone,mockFile);
                        myDropzone.options.success.call(myDropzone,mockFile);
                    });
                }
            });