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

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

我使用了下面的代码来实现这一点，添加了文件，但是当我单击submit按钮时，它显示没有文件

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

我的dropzone选项：

            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,
        };

---

我该怎么做？

回答：

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

此代码是为Laravelblade文件编写的：

    @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

@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>

@foreach（$product->附件为$attach）
$（“文档”）.ready（（）=>{
var path=“{{$path}}”；
var file=新文件（[path]，“{{$attach->file_name}}，{type:{{{$attach->mime_type}}”，最后修改：{{$attach->updated_at}）
文件['status']=“排队”；
文件['status']=“排队”；
文件['previewElement']=“div.dz-preview.dz图像预览”；
文件['previewTemplate']=“div.dz-preview.dz图像预览”；
文件[''u removeLink']=“a.dz-remove”；
文件['webkitRelativePath']=”；
文件['width']=500；
文件['height']=500；
文件['accepted']=true；
文件['dataURL']=path；
文件['upload']={
bytesSent:0，
文件名：“{{$attach->file_name}}”，
进展：0，
总计：{{$attach->file_size}，
uuid:“{md5（$attach->id）}”，
};
emit（“AddFile”、文件、路径）；
emit（“缩略图”、文件、路径）；
//myDropzone.emit（“完成”，itemInfo）；
//myDropzone.options.maxFiles=myDropzone.options.maxFiles-1；
myDropzone.files.push（文件）；
console.log（文件）；
});
@endforeach

回答：

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

此代码是为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

@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>

@foreach（$product->附件为$attach）
$（“文档”）.ready（（）=>{
var path=“{{$path}}”；
var file=新文件（[path]，“{{$attach->file_name}}，{type:{{{$attach->mime_type}}”，最后修改：{{$attach->updated_at}）
文件['status']=“排队”；
文件['status']=“排队”；
文件['previewElement']=“div.dz-preview.dz图像预览”；
文件['previewTemplate']=“div.dz-preview.dz图像预览”；
文件[''u removeLink']=“a.dz-remove”；
文件['webkitRelativePath']=”；
文件['width']=500；
文件['height']=500；
文件['accepted']=true；
文件['dataURL']=path；
文件['upload']={
bytesSent:0，
文件名：“{{$attach->file_name}}”，
进展：0，
总计：{{$attach->file_size}，
uuid:“{md5（$attach->id）}”，
};
emit（“AddFile”、文件、路径）；
emit（“缩略图”、文件、路径）；
//myDropzone.emit（“完成”，itemInfo）；
//myDropzone.options.maxFiles=myDropzone.options.maxFiles-1；
myDropzone.files.push（文件）；
console.log（文件）；
});

@endforeach