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

Question

更新 1

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

我的问题

如果我在拖放区内一个接一个地拖动文件，进度会正确显示。它从 0 变为 100%。

如果我将多个文件拖入拖放区，显示的每个进度都是一样的。发送的字节数也相等。

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

我有以下 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>

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

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

Answer 1

将 uploadMultiple 选项更改为 false。

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

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

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

Dropzone.js multiple file upload, get upload progress for each file

javascript

dropzone.js