Question

我最近搬到了《勇敢的浏览器》，并注意到dropzonejs上的预览生成存在问题（仅当勇敢的“屏蔽”功能启用时）。

当我检查生成的元素时，我看到这样的src：src(unknown)，当我在检查器中双击它时，src属性为空。

我有一个自定义的预览元素，如下所示：

<div id="template" class="file-row">
    <!-- This is used as the file preview template -->
    <div>
        <span class="preview"><img data-dz-thumbnail/></span>
    </div>
    <div>
        <p class="name" data-dz-name></p>
        <strong class="error text-danger" data-dz-errormessage></strong>
    </div>
    <div class="file-upload-progress">
        <div class="ui progress active inverted hide file-progress">
            <div class="bar" data-dz-uploadprogress>
                <div class="progress"></div>
            </div>
            <div class="label">some default label</div>
        </div>
    </div>
    <div>
        <p class="size" data-dz-size></p>
    </div>
    <div class="file-actions">
        <button class="ui button green start">
            <i class="ui icon upload"></i>
            <span>start upload</span>
        </button>
        <button data-dz-remove class="ui button orange cancel">
            <i class="ui icon close circle"></i>
            <span>cancel upload</span>
        </button>
    </div>
</div>

生成的预览应该在<img data-dz-thumbnail/>元素上。

我也有一个自定义addedFile事件，但是它不影响DOM，它只是更新一个计数器以订购多个图像并将data-order设置为.file-row元素。我试图评论我的整个addedFile，但并没有改变

我基于bootstrap example进行了预览，该预览在该示例中效果很好。我也有非常相似的配置和代码。

// Get the template HTML and remove it from the document
let previewNode = document.querySelector("#template");
previewNode.id = "";
let previewTemplate = previewNode.parentNode.innerHTML;
let loadExistingImages;
previewNode.parentNode.removeChild(previewNode);

let myDropzone = new Dropzone(document.body, { // Make the whole body a dropzone
    url: url, // Set the url
    thumbnailWidth: 150,
    thumbnailHeight: 80,
    acceptedFiles: "image/jpeg,image/png",
    previewTemplate: previewTemplate,
    autoQueue: false, // Make sure the files aren't queued until manually added
    previewsContainer: "#previews", // Define the container to display the previews
    //clickable: ".fileinput-button", // Define the element that should be used as click trigger to select files.
});

myDropzone.on("addedfile", function(file) {
    if(file.id) {
        $(file.previewTemplate).remove();
        file.previewTemplate = $("[data-old-order="+file.id+"]")[0];
        file.status = Dropzone.SUCCESS;
        myDropzone.files.push(file);
    } else {
        // Hookup the start button
        file.previewElement.querySelector(".start").onclick = function() { myDropzone.enqueueFile(file); };
        $(file.previewElement).data("order", fileOrder);
        $(file.previewTemplate).find('.file-progress').progress({
            percent: 0,
            text: {
                active: uploadingText,
                success: uploadSuccessText,
                error: uploadFailedText
            }
        });
    }
    fileOrder++;
});

我看不到任何可能影响预览版本的东西，并且在其他浏览器上也能很好地工作。

你们中的任何人有勇敢出现这种问题吗？

在Brave Browser上的Dropzonejs-数据图像预览不起作用

0 个答案: