Dropzone Chunking chunksUploaded 未被调用答案

【问题标题】：Dropzone Chunking chunksUploaded not being calledDropzone Chunking chunksUploaded 未被调用
【发布时间】：2020-03-14 14:33:20
【问题描述】：

我有这个 dropzone 配置，我打算使用分块。

到目前为止，我已经成功地发送了一个文件并在 console.log 中记录了几个块。但是，由于某种原因没有调用 chunksUploaded

Dropzone.options.dropzone = {
    url:"@Url.Action("SaveC", "Document", new { area="Document"})",
    autoProcessQueue: false,
    addRemoveLinks: true,
    uploadMultiple: false,
    parallelUploads: 1,
    chunking: true,
    forceChunking: true,
    chunkSize: 100000,
    parallelChunkUploads: true,
    retryChunks: true,
    retryChunksLimit: 3,
    params: function (files, xhr, chunk) {
        if (chunk) {
            return {
                dzUuid: chunk.file.upload.uuid,
                dzChunkIndex: chunk.index,
                dzTotalFileSize: chunk.file.size,
                dzCurrentChunkSize: chunk.dataBlock.data.size,
                dzTotalChunkCount: chunk.file.upload.totalChunkCount,
                dzChunkByteOffset: chunk.index * this.options.chunkSize,
                dzChunkSize: this.options.chunkSize,
                dzFilename: chunk.file.name,
            };
        }
    },
    init: function () {
        var submitButton = document.querySelector("#submit");
        var resetButton = document.querySelector("#reset");
        var token = $('input[name="__RequestVerificationToken"]').val();
        var wrapperThis = this;
        submitButton.addEventListener("click", function (e) {
            wrapperThis.processQueue();
            e.preventDefault();
            e.stopPropagation();
            e.stopImmediatePropagation();
            return false;
        });

        this.on('sending', function (data, xhr, formData) {
            formData.append("__RequestVerificationToken",token);
            formData.append("@Html.IdFor(x => x.CategoryId)", $("#@Html.IdFor(x => x.CategoryId)").val());
            formData.append("@Html.IdFor(x => x.RepositoryId)", $("#@Html.IdFor(x => x.RepositoryId)").val());
            formData.append("@Html.IdFor(x => x.BatchId)", $("#@Html.IdFor(x => x.BatchId)").val());
            formData.append("@Html.IdFor(x => x.BatchName)", $("#@Html.IdFor(x => x.BatchName)").val());
        });;

        this.on('error', function (file, message) {
            //toastr.error(message);
            $("#UploadActivity").val($("#UploadActivity").val() + message + "\r\n");
            wrapperThis.disable();
        });

        this.on("chunksUploaded", function (file, done) {
            //merge uploaded chunks
            console.log("AAAAAA");
            console.log(file.upload.uuid);
            this.options.autoProcessQueue = true;
            done();
        });

        this.on("queuecomplete", function () {
            this.options.autoProcessQueue = false;
        })
    }
};

我应该从我的 SaveC ajax 中返回一些东西吗？目前它只是返回一个 HTTPResponseMessage

【问题讨论】：

控制台是否返回任何错误？
没有错误。我试图 console.log("AAAA") 并没有出现
当我控制台记录块变量时，它会返回所有正确上传的块，所以看起来我的所有块都已上传。
阅读文档我看到chunksUploaded是一个回调，我认为它应该像params回调一样设置
如果它有效，请告诉我，这样我就可以为未来有同样问题的用户创建一个答案

标签： javascript jquery dropzone.js

【解决方案1】：

查看documentation here，您可以看到chunksUploaded 是一个回调参数，应该类似于params，而不是类似于sending 或error 的事件

Dropzone.options.dropzone = {
    url:"@Url.Action("SaveC", "Document", new { area="Document"})",
    autoProcessQueue: false,
    addRemoveLinks: true,
    uploadMultiple: false,
    parallelUploads: 1,
    chunking: true,
    forceChunking: true,
    chunkSize: 100000,
    parallelChunkUploads: true,
    retryChunks: true,
    retryChunksLimit: 3,
    params: function (files, xhr, chunk) {
        if (chunk) {
            return {
                dzUuid: chunk.file.upload.uuid,
                dzChunkIndex: chunk.index,
                dzTotalFileSize: chunk.file.size,
                dzCurrentChunkSize: chunk.dataBlock.data.size,
                dzTotalChunkCount: chunk.file.upload.totalChunkCount,
                dzChunkByteOffset: chunk.index * this.options.chunkSize,
                dzChunkSize: this.options.chunkSize,
                dzFilename: chunk.file.name,
            };
        }
    },
    chunksUploaded: function (file, done) {
        //merge uploaded chunks
        console.log("AAAAAA");
        console.log(file.upload.uuid);
        this.options.autoProcessQueue = true;
        done();
    },
    init: function () {
        var submitButton = document.querySelector("#submit");
        var resetButton = document.querySelector("#reset");
        var token = $('input[name="__RequestVerificationToken"]').val();
        var wrapperThis = this;
        submitButton.addEventListener("click", function (e) {
            wrapperThis.processQueue();
            e.preventDefault();
            e.stopPropagation();
            e.stopImmediatePropagation();
            return false;
        });

        this.on('sending', function (data, xhr, formData) {
            formData.append("__RequestVerificationToken",token);
            formData.append("@Html.IdFor(x => x.CategoryId)", $("#@Html.IdFor(x => x.CategoryId)").val());
            formData.append("@Html.IdFor(x => x.RepositoryId)", $("#@Html.IdFor(x => x.RepositoryId)").val());
            formData.append("@Html.IdFor(x => x.BatchId)", $("#@Html.IdFor(x => x.BatchId)").val());
            formData.append("@Html.IdFor(x => x.BatchName)", $("#@Html.IdFor(x => x.BatchName)").val());
        });;

        this.on('error', function (file, message) {
            //toastr.error(message);
            $("#UploadActivity").val($("#UploadActivity").val() + message + "\r\n");
            wrapperThis.disable();
        });

        this.on("queuecomplete", function () {
            this.options.autoProcessQueue = false;
        })
    }
};

【讨论】：