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

trnvg8h3  于 2022-11-12  发布在  其他
关注(0)|答案(8)|浏览(172)

我正在使用Dropzonejs在表单中添加图像上传功能,因为我在表单中有各种其他字段,所以我将autoProcessQueue设置为false,并在单击表单的“Submit”(提交)按钮时处理它,如下所示。

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 Wiki的以下帖子。https://github.com/enyo/dropzone/wiki/FAQ#how-to-show-files-already-stored-on-server
它用现有的图像填充dropzone-preview区域,但这次它不发送表单提交的现有图像。我猜这是因为这些图像没有添加到queue中,但如果是这样,那么如何在服务器端更新,以防用户删除现有的图像?
此外,什么会是更好的方法,添加已经添加的图像在queue再次或只是发送信息删除文件?

hujrc8aj

hujrc8aj1#

我花了一点时间试图再次添加图像,但在与它斗争了一段时间后,我最终只是将有关已删除图像的信息发送回服务器。
当用已有的图像填充拖放区时,我将图像的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');
            }
        });
    }
});

服务器代码(asp mvc控制器):

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Edit(ViewModel viewModel)
{
    if (ModelState.IsValid)
    {
        foreach (var url in viewModel.DeletedImageUrls)
        {
            // Code to remove the image
        }

        foreach (var image in viewModel.NewImages)
        {
            // Code to add the image
        }
    }
}

希望能帮上忙。

mctunoxg

mctunoxg2#

为了扩展Teppic的答案,我发现您需要发出complete事件来删除预览中的进度条。

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);
dxpyg8gm

dxpyg8gm3#

只需使用myDropzone.addFile(file)
来源于dropzone源代码https://github.com/enyo/dropzone/blob/4e20bd4c508179997b4b172eb66e927f9c0c8564/dist/dropzone.js#L978

inn6fuwd

inn6fuwd4#

这里有一个官方的常见问题解答

xmakbtuz

xmakbtuz5#

我使用dropzone内置的“displayExistingFile”方法解决了这个问题。
在初始化中:得双曲余切值.
1.创建模拟文件
让mockFile = {名称:文件。标题,大小:文件大小,数据URL:};
1.调用displayExistingFile函数
这个.displayExistingFile(模型文件,,空值,'匿名')
您可以放置回呼来回应缩图载入事件,而非'null'。
“匿名”用于交叉原点属性。

klr1opcd

klr1opcd6#

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

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

然而,参考这个Dropzone Github Issue,我发现了一个更简单的直接上传方法:

myDropzone.uploadFiles([imageFile])

遗憾的是,在Dropzone文档中没有对这个 uploadFiles 方法的引用,所以我想我应该与所有Dropzone用户分享一些知识。
希望这对某人有帮助

bejyjqdl

bejyjqdl7#

点击上传文件时,只需从下拉区中清除文件即可。所有文件都可以使用removeAllFiles()清除,特定文件也可以使用removeFile(fileName)删除。

w9apscun

w9apscun8#

如果您有文件的URL,则可以使用addFile添加文件。

fetch("url")
    .then(res => res.blob())
    .then((currentBlob) => {
        const generateFile = new File([currentBlob], "filename.jpg", {
            type: currentBlob.type,
        });
        myDropzone.addFile(generateFile);
    });

相关问题