Ограничить количество одновременных загрузок

Question

У меня есть система загрузки файлов на моем. NET Базовом сайте, который позволяет пользователю загружать столько файлов, сколько они хотят одновременно, непосредственно в корзину S3. Пользователь может загрузить 1 или несколько файлов. Проблема, с которой я сталкиваюсь, заключается в том, что при загрузке, скажем, 1000 файлов, браузер не любит создавать такое количество подключений, и чаще всего файлы обычно не загружаются. Даже при включенных повторных попытках эти попытки имеют тенденцию завершаться неудачей, поскольку браузер допускает только определенное количество одновременных подключений. Еще хуже то, что браузер заблокируется.

Что я хочу сделать, так это поместить файлы в очередь и разрешить фактическую загрузку только 20 файлов в любой момент времени (подумайте о том, как FileZilla ставит в очередь элементы для загрузки) , Когда файл завершается, новые файлы добавляются до тех пор, пока очередь не будет исчерпана. Таким образом, браузер создает только те соединения, которые ему нужны. У меня уже есть, поэтому AutoUpload установлен на False, и я могу поместить файлы в массив для обработки, но метод uploadSelectEvent.sender.upload() позволяет загружать все.

Есть ли способ приостановить все перед загрузкой, чтобы я мог возобновить их при необходимости? Есть ли лучший способ справиться с этим?

Answer 1

Я смог понять это самостоятельно. Вот как (обратите внимание, это потребует некоторой модификации для работы с вашим собственным кодом, а мой ответ не будет просто копировать и вставлять):

Создать массив для хранения некоторых данных:

/** 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; }
        });
    }

Создайте новую функцию для обработки очереди загрузки:

/**
 * 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; }
        });
    }
}

Захватите событие FileSelect и передайте событие в queueUpload.

В конце вы должны ограничить одновременную загрузку до 20 одновременно. Он по-прежнему позволяет перетаскивать файлы 100 или 1000 файлов в браузер (он все еще может заблокироваться на несколько c), но одновременно создает только до 20 соединений. Возможно, это не самый идеальный код, но он работал для моей ситуации.