Dropzone createThumbnailFromUrl（）问题 [英] Dropzone createThumbnailFromUrl() issue

问题描述

我需要使用 Laravel 5.4 将预先存在的图像文件添加到dropzone。这就是我使用 createThumbnailFromUrl（）函数的原因。但它不能正确生成图像。相反，它以空白的方式显示它们。为此，我使用了该链接（

PS：我们将不胜感激。

解决方案

与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）; 
  

I need to add pre-existing image files to dropzone by using Laravel 5.4. This is why I use createThumbnailFromUrl() function. But it does not generate images properly. Instead it shows them in blank way. I used that link (jsfiddle) for that purpose. I googled a lot, tried several ways, but it did not help:

Below is my code:

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

Here is the result :( :

P.S: Any kind of help would be appreciated.

解决方案

had the same issue with dropzone 5.3

this fixed it for me

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

这篇关于Dropzone createThumbnailFromUrl（）问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！