Dropzone 显示现有文件并编辑现有图像

Question

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

我使用下面的代码来做这个，文件被添加了，但是当我点击提交按钮时，它说没有文件。

 myDropzone.emit("addedfile", mockFile);
 myDropzone.emit("thumbnail", mockFile, path);
 myDropzone.emit("complete", mockFile);
 myDropzone.files.push(mockFile); // added this line

我的放置区选项：

            var options = {
            autoProcessQueue: false,
            maxFilesize: 5, // MB
            dictRemoveFile: "Remove",
            addRemoveLinks: true,
            paramName: "files",
            maxFiles: 6,
            parallelUploads: 6,
            uploadMultiple: true,
            acceptedFiles:"image/jpeg,image/jpg,image/png",
            capture: "image/*",
            previewsContainer: ".dropzone-previews",
            clickable:'.dropzone-previews',
            thumbnailMethod: 'crop',
            timeout: 500000,
            myAwesomeDropzone : true,
            autoDiscover :false,
            init: DropzoneInitializeFunction,
            ignoreHiddenFiles:true,
        };

我该怎么做？

Answer 1

答案：

我自己找到了我的问题的答案，我也会把它放在下面给你。

这段代码是为 Laravel 刀片文件编写的：

@foreach ($product->attachments as $attach)
<?php $path =  Helper::image_to_base64(asset($attach->url)); ?>

<script>
    $("document").ready(()=>{
        var path = "{{ $path }}";
        var file = new File([path], "{{ $attach->file_name }}", {type: "{{ $attach->mime_type }}", lastModified: {{ $attach->updated_at}}})
        file['status'] = "queued";
        file['status'] = "queued";
        file['previewElement'] = "div.dz-preview.dz-image-preview";
        file['previewTemplate'] = "div.dz-preview.dz-image-preview";
        file['_removeLink'] = "a.dz-remove";
        file['webkitRelativePath'] = "";
        file['width'] = 500;
        file['height'] = 500;
        file['accepted'] = true;
        file['dataURL'] = path;
        file['upload'] = {
            bytesSent: 0 ,
            filename: "{{ $attach->file_name }}" ,
            progress: 0 ,
            total: {{ $attach->file_size }} ,
            uuid: "{{ md5($attach->id) }}" ,
        };

        myDropzone.emit("addedfile", file , path);
        myDropzone.emit("thumbnail", file , path);
        // myDropzone.emit("complete", itemInfo);
        // myDropzone.options.maxFiles = myDropzone.options.maxFiles - 1;
        myDropzone.files.push(file);
        console.log(file);
    });
</script>

@endforeach

Answer 2

答案：

我自己找到了我的问题的答案，我也会把它放在下面给你。

这段代码是为 Laravel 刀片文件编写的：

    @foreach ($product->attachments as $attach)
    <?php $path =  Helper::image_to_base64(asset($attach->url)); ?>

    <script>
        $("document").ready(()=>{
            var path = "{{ $path }}";
            var file = new File([path], "{{ $attach->file_name }}", {type: "{{ $attach->mime_type }}", lastModified: {{ $attach->updated_at}}})
            file['status'] = "queued";
            file['status'] = "queued";
            file['previewElement'] = "div.dz-preview.dz-image-preview";
            file['previewTemplate'] = "div.dz-preview.dz-image-preview";
            file['_removeLink'] = "a.dz-remove";
            file['webkitRelativePath'] = "";
            file['width'] = 500;
            file['height'] = 500;
            file['accepted'] = true;
            file['dataURL'] = path;
            file['upload'] = {
                bytesSent: 0 ,
                filename: "{{ $attach->file_name }}" ,
                progress: 0 ,
                total: {{ $attach->file_size }} ,
                uuid: "{{ md5($attach->id) }}" ,
            };

            myDropzone.emit("addedfile", file , path);
            myDropzone.emit("thumbnail", file , path);
            // myDropzone.emit("complete", itemInfo);
            // myDropzone.options.maxFiles = myDropzone.options.maxFiles - 1;
            myDropzone.files.push(file);
            console.log(file);
        });
    </script>
@endforeach