javascript - Dropzonejs取消不起作用

Question

我有 Dropzonejs 的这个选项配置：

function getDndOptions(
    url,
    acceptedFiles,
    translations,
    type,
    afterRedirect,
    showProgress,
    parallelUploads
)
{
    var dropzoneOptions = {
        url: url,
        myAwesomeDropzone: false,
        parallelUploads: parallelUploads,
        //maxFilesize: number from post_max_size,
        addRemoveLinks: true,
        //params: {'param_1':'xyz','para_2':'aaa'},
        headers: {
            "X-CSRF-Token": jQuery("meta[name=csrf-token]").attr("content"),
            "X-Requested-With": "XMLHttpRequest",
            "X-Ajax": 1,
        },
        dictDefaultMessage: translations["DNDUPLOAD"],
        dictCancelUpload: translations["CANCEL"],
        dictRemoveFile: translations["DELETE"],

        init: function () {
            var myDropzone = this;
            this.on("queuecomplete", function (file) {

                if (afterRedirect) {
                    window.location.reload();
                }
            });
            this.on("addedfiles", function (file) {
                if (showProgress) {

                }
            });
            this.on("sending", function (file, xhr, data) {
                if (type) {
                    data.append("type", type);
                }
            });

            // Setup the observer for the button.
            jQuery("#clear_dropzone").on("click", function () {
                myDropzone.removeAllFiles();
                // If you want to cancel uploads as well, you
                myDropzone.removeAllFiles(true);
            });

            jQuery.ajax({
                headers: myDropzone.options.headers,
                type: 'GET',
                url: myDropzone.options.url,
                data: {id: name, type: type, method: "list"},
                dataType: 'html',
                success: function (data) {
                    var arrayData = JSON.parse(data);
                    jQuery.each(arrayData, function (key, value) {
                        var mockFile = {name: value.name, size: value.size};
                        myDropzone.emit("addedfile", mockFile);
                        myDropzone.options.thumbnail.call(myDropzone, mockFile, value.path);
                        myDropzone.emit("complete", mockFile);
                    });
                }
            });
        },
        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,
                    userID: "<%= UserID %>",
                };
            }
        },
        chunking: true,
        forceChunking: true,
        chunkSize: 1 * 1024 * 1024,
        parallelChunkUploads: true,
        retryChunks: true,
        retryChunksLimit: 3,
        chunksUploaded: function (file, done) {
            done();
        },
        sending: function (a, b, formdata) {
            // in case you want to add data and not override chunk info
            $.each(this.options.params, function (nm, vl) {
                formdata.append(nm, vl);
            });
        },
        canceled: function (file) {
            var _this = this;
            //send dzUuid as folder
            var name = file.upload.uuid;

            var _this = this;
            jQuery.ajax({
                headers: _this.options.headers,
                type: 'POST',
                url: _this.options.url,
                data: {id: name, type: type, method: "cancel"},
                dataType: 'html',
                success: function (data) {
                    //$("#msg").html(data);
                    //console.log(data);
                }
            });
            return this.emit("error", file, this.options.dictUploadCanceled);
        },
        removedfile: function (file) {

            var name = file.name;
            var _this = this;
            jQuery.ajax({
                headers: _this.options.headers,
                type: 'POST',
                url: _this.options.url,
                data: {id: name, type: type, method: "delete"},
                dataType: 'html',
                success: function (data) {
                    //$("#msg").html(data);
                    //console.log(data);
                }
            });

            var _ref;
            if (file.previewElement) {
                if ((_ref = file.previewElement) != null) {
                    _ref.parentNode.removeChild(file.previewElement);
                }
            }
            return this._updateMaxFilesReachedClass();
        },
    };

    if (acceptedFiles) {
        dropzoneOptions["acceptedFiles"] = acceptedFiles;
    }

    return dropzoneOptions;
}

问题是当我单击正在上传过程中的文件下的取消按钮时，上传仍然在后台继续。canceled上传最后一个块时将事件触发到后端。我除了文件的所有上传过程都将被取消。我的选择有什么问题还是那里缺少什么？否则一切正常。谢谢你的帮助。

标签： javascriptdropzone.js

Answer 1

我发现 Dropzonejs 缺少用于取消分块文件的代码。在功能上：

value: function cancelUpload(file)

我先改成这样：

for (
  var _iterator19 = groupedFiles[Symbol.iterator](), _step19;
  !(_iteratorNormalCompletion19 = (_step19 = _iterator19.next())
    .done);
  _iteratorNormalCompletion19 = true
) {
  var groupedFile = _step19.value;
  if(typeof step19.value.upload.chunks !== undefined) {
    var chunks = _step19.value.upload.chunks;
    if (chunks) {
      for (var i = 0; i < chunks.length; i++) {
        if (chunks[i].xhr) {
          chunks[i].xhr.abort();
        }
      }
    }
  }

  groupedFile.status = Dropzone.CANCELED;
}

问题是分块文件没有中止。现在它按预期工作。