限制并发上传

Question

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

我要做的是将文件放入队列中，并且在任何给定时间仅允许实际上传 20 个文件（想想 FileZilla 如何将要上传的项目排队）。当一个文件完成时，会添加一个新文件，直到队列用完。这样浏览器只会创建它需要的连接。我已经有了它，所以AutoUpload设置为False，我可以将文件放入一个数组中进行处理，但该uploadSelectEvent.sender.upload()方法可以上传所有内容。

有没有办法在启用上传之前暂停所有上传，以便我可以根据需要恢复它们？有没有更好的方法来处理这个？

Answer 1

我能够自己解决这个问题。以下是方法（请注意，这需要一些修改才能适用于您自己的代码，我不是纯粹的复制和粘贴答案）：创建一个数组来保存一些数据：/** Files currently uploading */const uploadQueue: any[] = [];捕获FileSuccess事件并添加它&nbsp; &nbsp; // Check the size of the queue&nbsp; &nbsp; if (uploadQueue.length < 20) {&nbsp; &nbsp; &nbsp; &nbsp; const that = (uploadSuccessEvent.sender as any);&nbsp; &nbsp; &nbsp; &nbsp; const module = that._module;&nbsp; &nbsp; &nbsp; &nbsp; const upload = module.upload;&nbsp; &nbsp; &nbsp; &nbsp; $(".k-file").each((i, x) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //console.log(i, x);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (uploadQueue.length < 20) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const fileEntry = $(x);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const started = fileEntry.is(".k-file-progress, .k-file-success, .k-file-error");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const hasValidationErrors = upload._filesContainValidationErrors(fileEntry.data("fileNames"));&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (!started && !hasValidationErrors) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; uploadQueue.push(fileEntry.data("fileNames")[0].uid);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //console.log("fileEntry", fileEntry.data("fileNames")[0].uid);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Start the upload process&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; module.performUpload(fileEntry);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; else { return; }&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; }创建一个新函数来处理上传队列：/**&nbsp;* Adds the file to the upload queue and starts the upload.&nbsp;* Other files will be loaded via the on success event.&nbsp;* @param uploadSelectEvent Select event object.&nbsp;*/function queueUpload(uploadSelectEvent: kendo.ui.UploadSelectEvent) {&nbsp; &nbsp; //console.log("uploadSelectEvent", uploadSelectEvent);&nbsp; &nbsp; // Check the size of the queue&nbsp; &nbsp; if (uploadQueue.length < 20) {&nbsp; &nbsp; &nbsp; &nbsp; // Start the upload process&nbsp; &nbsp; &nbsp; &nbsp; const that = (uploadSelectEvent.sender as any);&nbsp; &nbsp; &nbsp; &nbsp; const module = that._module;&nbsp; &nbsp; &nbsp; &nbsp; const upload = module.upload;&nbsp; &nbsp; &nbsp; &nbsp; //uploadSelectEvent.files.forEach((file, i) => { console.log(i, file); if (uploadQueue.length < 20) { uploadQueue.push(file.uid); } });&nbsp; &nbsp; &nbsp; &nbsp; $(".k-file").each((i, x) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //console.log(i, x);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (uploadQueue.length < 20) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const fileEntry = $(x);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const started = fileEntry.is(".k-file-progress, .k-file-success, .k-file-error");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const hasValidationErrors = upload._filesContainValidationErrors(fileEntry.data("fileNames"));&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (!started && !hasValidationErrors) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; uploadQueue.push(fileEntry.data("fileNames")[0].uid);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; module.performUpload(fileEntry);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; else { return; }&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; }}捕获FileSelect事件并将事件传递给queueUpload.最后，您应该一次将并发上传限制为 20 个。它仍然允许将 100 个或 1000 个文件拖入浏览器（它可能仍会锁定一秒钟），但一次最多只能创建 20 个连接。这可能不是最理想的代码，但它适用于我的情况。