Javascript 在Dropzone中添加现有图像文件

我正在使用

Dropzonejs

在表单中添加图像上传功能，因为表单中有各种其他字段，所以我将

autoProcessQueue

设置为

false

，并单击表单的提交按钮进行处理，如下所示

Dropzone.options.portfolioForm = { 

    url: "/user/portfolio/save",
    previewsContainer: ".dropzone-previews",
    uploadMultiple: true,
    parallelUploads: 8,
    autoProcessQueue: false,
    autoDiscover: false,
    addRemoveLinks: true,
    maxFiles: 8,

    init: function() {

         var myDropzone = this;
         this.element.querySelector("button[type=submit]").addEventListener("click", function(e) {

             e.preventDefault();
             e.stopPropagation();
             myDropzone.processQueue();
         });
     }
 }

这可以很好地工作，并允许我在提交表单时处理发送的所有图像。然而，我也希望在用户再次编辑表单时能够看到用户已经上传的图像。所以我浏览了Dropzone维基上的以下文章。

它使用现有图像填充

dropzone预览

区域，但这次不使用表单提交发送现有图像。我猜这是因为这些图像没有添加到

队列中

，但如果是这样的话，那么在用户删除现有图像的情况下，如何在服务器端进行更新

---

还有，更好的方法是什么，再次在

队列中添加已添加的图像，还是只发送已删除文件的信息？
我花了一点时间尝试再次添加图像，但在与之斗争了一段时间后，我只将有关已删除图像的信息发送回服务器

用现有图像填充dropzone时，我将图像的url附加到mockFile对象。在removedfile事件中，如果要删除的文件是预填充的图像（通过测试传递到事件中的文件是否具有url属性来确定），我将向表单添加一个隐藏的输入。我已将相关代码包括在下面：

Dropzone.options.imageDropzone = {
    paramName: 'NewImages',
    autoProcessQueue: false,
    uploadMultiple: true,
    parallelUploads: 100,
    maxFiles: 100,
    init: function () {
        var myDropzone = this;

        //Populate any existing thumbnails
        if (thumbnailUrls) {
            for (var i = 0; i < thumbnailUrls.length; i++) {
                var mockFile = { 
                    name: "myimage.jpg", 
                    size: 12345, 
                    type: 'image/jpeg', 
                    status: Dropzone.ADDED, 
                    url: thumbnailUrls[i] 
                };

                // Call the default addedfile event handler
                myDropzone.emit("addedfile", mockFile);

                // And optionally show the thumbnail of the file:
                myDropzone.emit("thumbnail", mockFile, thumbnailUrls[i]);

                myDropzone.files.push(mockFile);
            }
        }

        this.on("removedfile", function (file) {
            // Only files that have been programmatically added should
            // have a url property.
            if (file.url && file.url.trim().length > 0) {
                $("<input type='hidden'>").attr({
                    id: 'DeletedImageUrls',
                    name: 'DeletedImageUrls'
                }).val(file.url).appendTo('#image-form');
            }
        });
    }
});

我希望这会有所帮助。
单击“上载文件”，只需从dropzone中清除文件即可。
可以使用removeAllFiles（）或特定文件清除所有文件，也可以使用removeFile（文件名）删除所有文件。
要扩展Teppic的回答，我发现您需要发出完整事件以删除预览上的进度条

var file = {
    name: value.name,
    size: value.size,
    status: Dropzone.ADDED,
    accepted: true
};
myDropzone.emit("addedfile", file);                                
myDropzone.emit("thumbnail", file, value.path);
myDropzone.emit("complete", file);
myDropzone.files.push(file);

最初，我这样做是为了以编程方式上载一个预先存在的文件：

myDropzone.emit("addedfile", imageFile);                                
myDropzone.emit("thumbnail", imageFile, imageUrl);
myDropzone.files.push(file);

然而，参考这一点，我发现了一种更容易直接上传的方法：

myDropzone.uploadFiles([imageFile])

不幸的是，中没有对这个uploadFiles方法的引用，所以我想我应该与所有Dropzone用户分享一些知识

希望这对某人有所帮助
只需使用
myDropzone.addFile（file）

从dropzone源代码中有一个官方常见问题解答，我使用dropzone内置的“displayExistingFile”方法解决了这个问题

在init:函数中

创建模拟文件

让mockFile={name:file.title，size:file.size，dataURL:}

调用displayExistingFile函数

此.displayExistingFile（mockFile，null，'anonymous'）

您可以放置回调来响应缩略图加载事件，而不是“null”

“匿名”用于跨源属性
 谢谢Teppic，是的，我也必须这样做。：）一点改进：在mockFile中添加“accepted:true”，这样Dropzone就可以识别正确上传的文件。例如，这使得可上传文件的限制（“maxFiles”）工作起来像一个charmPerfect！谢谢，如果我添加一个文件并点击提交按钮，dropzone只获取新添加的图像，现有图像将丢失，对吗？在这种情况下我能做什么？接下来如何在队列中添加现有图像以使用processQueue（）方法？感谢您的代码的第一部分是模拟上载过程，而不是真正向服务器发布任何内容。和
myDropzone.uploadFiles（[imageFile]）
正在发布到服务器，因此它们是不同的。应该向此函数传递哪些数据？当我尝试使用addFile（）时，我遇到错误“无法读取未定义的属性“replace”。是否有一种特殊的方式来组合文件对象？我使用的是Dropzone 5.5版。您可以传递一个javascript文件或DropzoneFile，请参阅：另外，请参阅：我在Dropzone.jsI的版本（v5.5）中找不到displayExistingFile函数。我确认，从2020年8月起，Dropzone 5.7.2status可以使用此函数，并且接受此函数非常重要，如果我们不使用它，MaxFile将出错
myDropzone.uploadFiles([imageFile])