Dropzone.js + AWS S3 停止队列答案

【问题标题】：Dropzone.js + AWS S3 stalling queueDropzone.js + AWS S3 停止队列
【发布时间】：2021-03-25 07:08:06
【问题描述】：

我正在尝试使用浏览器的 aws-sdk.js 将 dropzone.js 上传器隐含到亚马逊 S3。但是当我超过设置中的“parallelUploads”最大值时，队列永远不会完成。我正在使用以下链接中的方法：

我的代码的相关部分：

var dz = new Dropzone("#DZContainer", {
    acceptedFiles: "image/*,.jpg,.jpeg,.png,.gif",
    autoQueue: true,
    autoProcessQueue: true,
    parallelUploads: 10,
    clickable: [".uploadButton"],
    accept: function(file, done){
        let params = {
            "Bucket": "upload-bucket",
            "Key": getFullKey(file.name),
            Body: file,
            Region: "us-east-1,
            ContentType: file.type
        }
        file.s3upload = AWS.S3.ManagedUpload(params);
        if (typeof(done) === 'function') done();
    },
    canceled: function(file) {
        if (file.s3upload) file.s3upload.abort();
    },
    init: function () {
        this.on('removedfile', function (file) {
            if (file.s3upload) file.s3upload.abort();
        });
    }
)

dz.uploadFiles = function (files) {
    for (var j = 0; j < files.length; j++) {
        var file = files[j];
        dz.SendFile(file);
    }
};
dz.SendFile = function(file) {
    file.s3upload.send(function (err, data) {
    if (err) {
        console.err(err)
        dz.emit("error", file, err.message);
    } else {
        dz.emit("complete", file);
    }
});

如果我拖入（或使用可点击）超过 10 个文件，前 10 个会完成，但它不会处理队列的其余部分。我错过了什么？感谢所有帮助

编辑：随着对 Dropzone 的深入研究，看起来文件状态似乎永远不会被设置为完成。我在 dropzone 代码中看到了一个名为 _finished() 的函数，但我很难弄清楚应该触发该函数的具体内容。我尝试了下面列出的 dz.emit("complete", file) 以及添加 dz.emit("success",file) 但我在 _finished() 函数第一行的断点永远不会触发。因此 file.status 永远不会设置为已完成。有谁知道 _finished() 应该何时/什么/如何运行？

【问题讨论】：

标签： amazon-web-services amazon-s3 dropzone.js aws-sdk-js

【解决方案1】：

正如编辑中提到的，我能够追踪 .status 未正确设置的位置。这似乎在一个名为 _finished() 的私有 Dropzone 函数中

经过进一步检查，我注意到 _finished() 在将 file.status 设置为 Dropzone.SUCCESS 并发出“成功”之后似乎也在调用 emit("complete", file)。然后它检查是否设置了 autoProcessQueue，如果设置了，则返回 processQueue() 调用的结果。

我很难弄清楚是什么触发了这个函数，因为它是在一个 onload 事件上，最终意识到它与内部上传器使用的 XHTTPRequest 对象相关联（被 S3 上传器覆盖）

所以我修改了函数来模拟 Dropzone._finished() 正在做什么，它的行为符合预期：

dz.SendFile = function(file) {
    file.s3upload.send(function (err, data) {
    if (err) {
        console.err(err)
        dz.emit("error", file, err.message);
    } else {
        file.status = Dropzone.SUCCESS;
        dz.emit("success", file, data, err);
        dz.emit("complete", file);
        if(dz.options.autoProcessQueue)
            dz.processQueue()
    }
});

【讨论】：