如何使用预览模板在一行中显示多个 Dropzone.js 预览记录

Question

我正在使用 dropzone.js 来显示我的应用程序的图像。该应用程序使用 Laravel、Vue 和 Bootstrap。我的数据库中的一条记录可以有多达 40 多个图像，因此每行显示一个预览并不是很吸引人。理想情况下，我会每行显示 4 个，但我不知道如何做到这一点。在我看来（因为我看到的每个例子都是这样）每个文件记录都成为它自己的行。

我的 HTML 看起来像这样：

<div class="dropzone" id="dropzone_container"></div>

<div class="dropzone-previews"></div>

<div id="preview-template" class="preview-template">
    <div class="dz-preview dz-file-preview">

        <div class="dz-details">
            <img data-dz-thumbnail/>
            <div class="dz-filename"><span data-dz-name></span></div>
            <div class="dz-size" data-dz-size></div>

        </div>
        <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>
        <div class="dz-error-message"><span data-dz-errormessage></span></div>
    </div>
</div>

Javascript：

let dropzone = new Dropzone("#dropzone_container", {
        url: "#",
        method: 'put',
        addRemoveLinks: true,
        previewsContainer: ".dropzone-previews",
        previewTemplate: '#preview-template',
        autoQueue: false,
        createImageThumbnails: true,
        thumbnailWidth: 360,
        thumbnailHeight: 360,
        autoProcessQueue: false,
        autoProcess: false,
        acceptedFiles: ".gif,.jpeg,.jpg,.png",
        maxThumbnailFilesize: 1000,
});

Answer 1

您可以使用bootstrap的网格系统。只需在

row

上添加

row-cols-n

和

dropzone-previews

。

注意：使用

dropzone@5

和

[email protected]

进行测试，并且我修改了

previewTemplate

属性。

<div class="dropzone" id="dropzone_container"></div>
<div class="dropzone-previews row row-cols-4"></div>
<div id="preview-template" class="preview-template">
    <div class="dz-preview dz-file-preview">
        <div class="dz-details">
            <img data-dz-thumbnail />
            <div class="dz-filename"><span data-dz-name></span></div>
            <div class="dz-size" data-dz-size></div>
        </div>
        <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>
        <div class="dz-error-message"><span data-dz-errormessage></span></div>
    </div>
</div>

let dropzone = new Dropzone("#dropzone_container", {
    url: "#",
    method: 'put',
    addRemoveLinks: true,
    previewsContainer: ".dropzone-previews",
    previewTemplate: document.getElementById('preview-template').innerHTML,
    autoQueue: false,
    createImageThumbnails: true,
    thumbnailWidth: 360,
    thumbnailHeight: 360,
    autoProcessQueue: false,
    autoProcess: false,
    acceptedFiles: ".gif,.jpeg,.jpg,.png",
    maxThumbnailFilesize: 1000,
});