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

更新1

如果将in-Dropzone configuration 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'））

文件2对象（大小：3842203）
31.078931778452883
1277952

---

[p#3fe0357e-5fae-4f6a-aa9e-895ced0469a9]

将

上传多个

选项更改为

假

如果设置为

true

，则所有文件将在一个请求中发送，因此所有文件只能获得一个进度。要获取单个文件的进度，需要将

uploadMultiple

设置为

false

---

您可以将

parallelUploads

值设置为所需的任何值。

将

uploadMultiple

选项更改为

false

如果设置为

true

，则所有文件将在一个请求中发送，因此所有文件只能获得一个进度。要获取单个文件的进度，需要将

uploadMultiple

设置为

false

---

您可以将

parallelUploads

值设置为所需的任何值。

预览模板

其已知的BS模板问题此插件的github中存在解决方案预览模板中缺少您data dz size>

其已知的BS模板问题此插件的github中存在解决方案