Как получить массив из нескольких загруженных файлов с облачным виджетом - PullRequest
Новая
       23

Как получить массив из нескольких загруженных файлов с облачным виджетом

0 голосов
/ 10 июня 2019

Я даю пользователям возможность загружать несколько файлов в форму. Интерфейс загрузки обрабатывается виджетом Cloudinary. Затем я хочу передать в бэкэнд массив с URL загруженных файлов, чтобы сохранить его в базе данных.

К сожалению, кажется, что код работает синхронно, поэтому, как только первая загрузка заканчивается, его URL-адрес помещается в массив, и код останавливается, не дожидаясь, пока другие файлы будут помещены в массив. Мне только удалось установить функцию setTimeout, но я признаю, что это обходной путь. 

$(document).ready(function () {
    var myWidget = cloudinary.createUploadWidget({
    cloudName: 'mycloudinaryaccountname', 
    uploadPreset: 'ml_default'}, (error, result) => { 
        if (!error && result && result.event === "success") { 
            console.log('Done! Here is the image info: ', result.info);
        fileArray = [];
        setTimeout(() => {
            fileArray.push(result.info.url)
            console.log(fileArray)
        }, 2000);    

        $('#valueUpload').val(fileArray);
        }

    }
    )

    document.getElementById("upload_widget").addEventListener("click", function(e){
        e.preventDefault();
        myWidget.open();
    }, false);
})

1 Ответ

1 голос
/ 12 июня 2019

Причина, по которой он работает с setTimeout, а не без него, на самом деле плохая - вы продолжаете сбрасывать значение fileArray на пустое ([]). setTimeout обходится без этого, потому что, если у вас нет действительно больших загрузок, время загрузки всей очереди занимает менее 2 секунд; окончательное событие загрузки через 1,8 секунды очистило бы массив, но затем через 0,2 секунды все пройдут толчки массива.

Простым решением было бы инициализировать переменную только для очистки, если это необходимо, и удалить setTimeout. Вы также должны убедиться, что область видимости переменной fileArray выше, чем просто эта функция (я сделал это с областью действия для окна) - вот так: 

if (!error && result && result.event === "success") {
    console.log('Done! Here is the image info: ', result.info);
    window.fileArray = (window.fileArray || []);
    fileArray.push(result.info.url)
    console.log(fileArray)

    $('#valueUpload').val(fileArray);
}
...