Javascript 限制并发上载

在我的.NET核心站点中有一个文件上传系统，允许用户一次上传任意数量的文件到S3存储桶。用户可以上载一个或多个文件。我遇到的问题是，当上传（比如1000个文件）时，浏览器不喜欢创建那么多的连接，而且通常情况下，文件无法上传。即使启用了重试，这些重试也会失败，因为浏览器只允许一定数量的并发连接。更糟糕的是，浏览器会锁定

我想做的是将文件放入队列，并且在任何给定时间只允许实际上载20个文件（想想FileZilla如何将要上载的项目排队）。文件完成后，将添加新文件，直到队列耗尽。这样，浏览器只创建它所需的连接。我已经有了它，所以

AutoUpload

设置为

False

，我可以将文件放入一个数组中进行处理，但是

uploadSelectEvent.sender.upload（）

方法可以对所有内容进行上载

---

是否有办法在启用上载之前暂停所有上载，以便我可以根据需要继续上载？有没有更好的方法来处理这个问题？

我自己就能解决这个问题。以下是如何操作（注意，这需要一些修改才能用于您自己的代码，而我的答案不是纯粹的复制粘贴）：

创建一个数组以保存某些数据：

/** Files currently uploading */
const uploadQueue: any[] = [];

捕获

FileSuccess

事件并添加此

    // Check the size of the queue
    if (uploadQueue.length < 20) {
        const that = (uploadSuccessEvent.sender as any);
        const module = that._module;
        const upload = module.upload;

        $(".k-file").each((i, x) => {
            //console.log(i, x);
            if (uploadQueue.length < 20) {
                const fileEntry = $(x);
                const started = fileEntry.is(".k-file-progress, .k-file-success, .k-file-error");
                const hasValidationErrors = upload._filesContainValidationErrors(fileEntry.data("fileNames"));

                if (!started && !hasValidationErrors) {
                    uploadQueue.push(fileEntry.data("fileNames")[0].uid);
                    //console.log("fileEntry", fileEntry.data("fileNames")[0].uid);

                    // Start the upload process
                    module.performUpload(fileEntry);
                }
            }
            else { return; }
        });
    }

//检查队列的大小
如果（uploadQueue.length<20）{
const that=（uploadSuccessEvent.sender作为任何文件）；
const module=that.\u module；
const upload=module.upload；
$（“.k-file”）。每个（（i，x）=>{
//控制台日志（i，x）；
如果（uploadQueue.length<20）{
const fileEntry=$（x）；
const start=fileEntry.is（“.k-file-progress、.k-file-success、.k-file-error”）；
const hasValidationErrors=upload.\u filecontainvalidationerrors（fileEntry.data（“filename”）；
如果（！started&！hasvalidateErrors）{
uploadQueue.push（fileEntry.data（“文件名”）[0].uid）；
//console.log（“fileEntry”，fileEntry.data（“filename”）[0].uid）；
//开始上传过程
模块performUpload（文件输入）；
}
}
else{return；}
});
}

创建一个新函数来处理上载队列：

/**
 * Adds the file to the upload queue and starts the upload.
 * Other files will be loaded via the on success event.
 * @param uploadSelectEvent Select event object.
 */
function queueUpload(uploadSelectEvent: kendo.ui.UploadSelectEvent) {
    //console.log("uploadSelectEvent", uploadSelectEvent);

    // Check the size of the queue
    if (uploadQueue.length < 20) {
        // Start the upload process
        const that = (uploadSelectEvent.sender as any);
        const module = that._module;
        const upload = module.upload;

        //uploadSelectEvent.files.forEach((file, i) => { console.log(i, file); if (uploadQueue.length < 20) { uploadQueue.push(file.uid); } });

        $(".k-file").each((i, x) => {
            //console.log(i, x);
            if (uploadQueue.length < 20) {
                const fileEntry = $(x);
                const started = fileEntry.is(".k-file-progress, .k-file-success, .k-file-error");
                const hasValidationErrors = upload._filesContainValidationErrors(fileEntry.data("fileNames"));

                if (!started && !hasValidationErrors) {
                    uploadQueue.push(fileEntry.data("fileNames")[0].uid);
                    module.performUpload(fileEntry);
                }
            }
            else { return; }
        });
    }
}

/**
*将文件添加到上载队列并开始上载。
*其他文件将通过on success事件加载。
*@param uploadSelectEvent选择事件对象。
*/
函数queueUpload（uploadSelectEvent:kendo.ui.uploadSelectEvent）{
//log（“uploadSelectEvent”，uploadSelectEvent）；
//检查队列的大小
如果（uploadQueue.length<20）{
//开始上传过程
const that=（uploadSelectEvent.sender作为任意文件）；
const module=that.\u module；
const upload=module.upload；
//uploadSelectEvent.files.forEach（（file，i）=>{console.log（i，file）；if（uploadQueue.length<20）{uploadQueue.push（file.uid）；}）；
$（“.k-file”）。每个（（i，x）=>{
//控制台日志（i，x）；
如果（uploadQueue.length<20）{
const fileEntry=$（x）；
const start=fileEntry.is（“.k-file-progress、.k-file-success、.k-file-error”）；
const hasValidationErrors=upload.\u filecontainvalidationerrors（fileEntry.data（“filename”）；
如果（！started&！hasvalidateErrors）{
uploadQueue.push（fileEntry.data（“文件名”）[0].uid）；
模块performUpload（文件输入）；
}
}
else{return；}
});
}
}

捕获

FileSelect

事件并将该事件传递给

queueUpload

最后，您应该将并发上传限制为一次20次。它仍然允许将100或1000个文件拖动到浏览器中（可能仍会锁定一秒钟），但一次最多只能创建20个连接。这可能不是最理想的代码，但它适合我的情况