Question

我需要使用 Laravel 5.4 将预先存在的图像文件添加到dropzone。这就是我使用createThumbnailFromUrl()函数的原因。但它不能正确生成图像。相反，它以空白的方式显示它们。我为此目的使用了该链接（jsfiddle）。我搜索了很多，尝试了几种方法，但它没有帮助：

以下是我的代码：

<script type="text/javascript" src='{{asset("js/dropzone/min/dropzone.min.js")}}'></script>
<script type="text/javascript">

  Dropzone.options.addImages = {
  paramName: "file", // The name that will be used to transfer the file
  addRemoveLinks: true,
     // The setting up of the dropzone
     init:function() {

        // Add server images
        var myDropzone = this;
        var existingFiles = [
        { name: "Filename 1.pdf", size: 12345678,imageUrl:'http://img.tfd.com/wn/93/17E8B3-awful.png' },
        { name: "Filename 2.pdf", size: 12345678,imageUrl:'http://img.tfd.com/wn/93/17E8B3-awful.png' },
        { name: "Filename 3.pdf", size: 12345678,imageUrl:'http://img.tfd.com/wn/93/17E8B3-awful.png' },
        { name: "Filename 4.pdf", size: 12345678,imageUrl:'http://img.tfd.com/wn/93/17E8B3-awful.png' },
        { name: "Filename 5.pdf", size: 12345678,imageUrl:'http://img.tfd.com/wn/93/17E8B3-awful.png' }
        ];

        for (i = 0; i < existingFiles.length; i++) {

           // alert(existingFiles[i].imageUrl);

           myDropzone.emit("addedfile",existingFiles[i]);
           myDropzone.files.push(existingFiles[i]);
           myDropzone.createThumbnailFromUrl(existingFiles[i], existingFiles[i].imageUrl, function() {
            myDropzone.emit("complete", existingFiles[i]);
        }, "anonymous");

       }
   },
};
</script>

结果如下:(：

P.S：任何形式的帮助都会受到赞赏。

Answer 1

与dropzone 5.3有相同的问题

这为我修好了

let mockFile = { name: "Loaded File", dataURL: relURL };
dropzoneInst.files.push(mockFile);
dropzoneInst.emit("addedfile", mockFile);
dropzoneInst.createThumbnailFromUrl(mockFile,
    dropzoneInst.options.thumbnailWidth, 
    dropzoneInst.options.thumbnailHeight,
    dropzoneInst.options.thumbnailMethod, true, function (thumbnail) 
        {
            dropzoneInst.emit('thumbnail', mockFile, thumbnail);
        });
dropzoneInst.emit('complete', mockFile);

Answer 2

我遇到了同样的问题。使用这些文件：

它对我有用。

Answer 3

我知道已经有点晚了，但是我面临着同样的问题。我遇到的问题是竞赛条件，其中仅加载了最后一个缩略图，其他缩略图在完成之前被卡住，因为在createThumbnailFromUrl获取数据之前，我进行了更改。将调用放入函数中对我来说很成功：

for (var i = 0; i < images.length; i++) {
    var temp = { name: images[i], dataURL: images[i] };
    myDropzone.files.push(temp);
    myDropzone.emit("addedfile", temp);
    createThumbnail(temp);
 }

function createThumbnail(temp) {
    myDropzone.createThumbnailFromUrl(temp,
        myDropzone.options.thumbnailWidth,
        myDropzone.options.thumbnailHeight,
        myDropzone.options.thumbnailMethod, true, function (thumbnail) {
            myDropzone.emit('thumbnail', temp, thumbnail);
            myDropzone.emit("complete", temp);
        });
}

我的答案是受BLitande启发的，它帮助我从一开始就将其投入工作。

Answer 4

我附上我的解决方案作为参考，该解决方案基于先前的许多答案，但主要是基于Raphael Eckmayer。这样做是为了使其在 Django 3.0.5 和 dropzone.js 5.7.0 中正常工作。也许这不是最佳解决方案，但它可以工作。

我正在使用新的模板标签json_script从Django视图发送当前图像，该模板标签将在Django中准备的文件列表打包为JSON。基本上在我的模板中我有这个：

{{ images|json_script:"images" }}

然后我在脚本中对其进行处理。这是我网站上的完整脚本，希望对您有所帮助。

编辑：

此代码存在一个问题，如果我将新图片与数据库中的旧图片一起添加到放置区中，则该表单将提交两次。在第一遍中，我从dropzone.js中获取图片，但也可以获取所有字段的图片，因为我是从表单中复制图片的。然后，第二遍，我再次提交表单，但现在没有图片。我的观点实际上可以很好地处理并存储数据，但是当我开始写下如何在表单编辑中处理删除的图片时，我对此有疑问，因此我决定以不同的方式进行处理。请注意，代码现在已更改，而不是两次提交表单，而是发送带有dropzone的整个表单和图片，但是在 successmultiple 之后，我只是重定向到其他页面。然后所有内容都会更新并存储。因此，更改发生在successmultiple部分。

<script type="text/javascript"> function getCookie(cname) { var name = cname + "="; var decodedCookie = decodeURIComponent(document.cookie); var ca = decodedCookie.split(';'); for(var i = 0; i <ca.length; i++) { var c = ca[i]; while (c.charAt(0) == ' ') { c = c.substring(1); } if (c.indexOf(name) == 0) { return c.substring(name.length, c.length); } } return ""; } Dropzone.autoDiscover = false; var first_time = true; var old_images = JSON.parse(document.getElementById('images').textContent) var myDropzoneX = new Dropzone("div#mydropzone", { autoProcessQueue: false, url: "{% url 'site_report_edit' report_id=1 %}", addRemoveLinks: true, thumbnailWidth: 400, thumbnailHeight: 400, uploadMultiple: true, parallelUploads: 12, init: function() { var myDropzone = this; var addButton = document.getElementById("submit-btn"); if (old_images) { console.log(old_images); for (x in old_images) { var mockFile = { name: old_images[x].name, size: old_images[x].size, kind: 'image', dataURL: old_images[x].urlich, accepted: true } myDropzone.files.push(mockFile); myDropzone.emit('addedfile', mockFile); createThumbnail(mockFile); console.log(old_images[x].name, old_images[x].urlich); } function createThumbnail(temp) { myDropzone.createThumbnailFromUrl(temp, myDropzone.options.thumbnailWidth, myDropzone.options.thumbnailHeight, myDropzone.options.thumbnailMethod, true, function (thumbnail) { myDropzone.emit('thumbnail', temp, thumbnail); myDropzone.emit("complete", temp); }); } myDropzone._updateMaxFilesReachedClass(); } addButton.addEventListener("click", function (e) { e.preventDefault(); e.stopPropagation(); if (myDropzone.getQueuedFiles().length > 0) { myDropzone.processQueue(); } else { document.getElementById("dropzone-form").submit(); } }); this.on("successmultiple", function (files, response) { setTimeout(function (){ {#document.getElementById("dropzone-form").submit();#} window.location.href = "/admin/report/{{ report_id }}"; }, 1000); }); }, sending: function (file, xhr, formData) { var formEl = document.getElementById("dropzone-form"); if (first_time) { for (var i=0; i<formEl.elements.length; i++){ formData.append(formEl.elements[i].name, formEl.elements[i].value) first_time = false; } } formData.append('csrfmiddlewaretoken', getCookie('csrftoken')); formData.append("image", file.name); } }); </script>

请注意，对于console.log有一些评论和一些写作，但是您显然可以摆脱它。

Dropzone createThumbnailFromUrl（）问题

4 个答案: