Question

更新1

如果在Dropzone配置中uploadMultiple设置为false，那么它可以正常工作，因为它只会同时上传一个文件。但我想解决问题并同时上传多个文件，并分别得到每个文件的进度。

我的问题

如果我在dropzone中逐个拖动一个文件，则会正确显示进度。它从0变为100％。

如果我将多个文件拖放到dropzone中，则显示的每个进度都是相同的。发送的字节也是等于。

但是我需要为每个文件发送一个单独的进度/字节。

我有以下 Dropzone配置：

Dropzone.options.scannedFiles = {
    url: '/',
    uploadMultiple: true,
    addRemoveLinks: false,
    previewsContainer: null,
    autoProcessQueue: true,
    previewTemplate: document.getElementById('preview-template').innerHTML,
    init: function () {
        this.on('addedfile', (file) => {
            $(file.previewElement).find("[data-dzc-id]").attr('id', uuid.v4());
        });

        this.on('uploadprogress', (file, progress, bytesSent) => {
            console.log(file);
            console.log(file.upload.progress);
            console.log(file.upload.bytesSent);

            $('#'+ $(file.previewElement).find("[data-dzc-id]").attr('id')).html(file.upload.bytesSent);
        });
    }
};

并关注预览模板

<div style="display: none" id="preview-template">
    <div class="mdz-wrapper">
        <div class="mdz-content-wrapper">
            <div class="mdz-file-icon">
                <i class="material-icons">insert_drive_file</i>
            </div>
            <div class="mdz-file-info">
                <p data-dz-name></p>
                | <p data-dz-size></p>
            </div>
        </div>
        <div>
            <div>
                <p data-dzc-id></p>
            </div>
            <i class="material-icons" data-dz-remove>cancel</i>
        </div>
    </div>
</div>

当我在dropzone中删除两个文件时，console.log（）语句的

输出。

一个文件只有一个输出，我只发布一个，因为其他文件正在递增进度和文件大小。

文件1对象（大小：269367）| console.log（文件）;
31.078931778452883 | console.log（file.upload.progress）;
1277952 | console.log（file.upload.bytesSent）;
[p＃45a3e751-89c7-41fe-8442-bab98257c688] | console.log（$（'＃'+ $（file.previewElement）.find（“[data-dzc-id]”）。attr（'id'）））
< / p>

文件2对象（大小：3842203）
31.078931778452883
1277952
[P＃3fe0357e-5fae-4f6a-aa9e-895ced0469a9]

Answer 1

将uploadMultiple选项更改为false。

如果它设置为true，则所有文件将在一个请求中发送，因此您只能获得所有文件的一个进度。要获取单个文件的进度，您需要将uploadMultiple设置为false。

您可以将parallelUploads值设置为您想要的任何值。

Dropzone.js多文件上传，获取每个文件的上传进度

1 个答案: