Undefined при попытке вывести элемент массива (FileReader)

Question

При попытке вывести любой элемент массива получаю undefined, однако если вывести весь массив через console.log, то он выводится.

showFiles = function(files) {
        let resultArray = [];

        for (let i = 0; i < files.length; i++) {
            (function(file) {
                let fr = new FileReader();
                fr.onload = function(e) {
                    let image = new Image();
                    image.src = e.target.result;

                    image.onload = function() {
                        resultArray.push({
                            'src' : e.target.result,
                            'width' : this.width,
                            'height' : this.height,
                            'size' : file.size
                        });
                    }
                };
                fr.readAsDataURL(file);
            })(files[i]);
        }

        console.log(resultArray[0]);



    };

А вы уверены, что данные вообще есть в массиве? Напишите console.log(resultArray); — doox911, Sep 25 '19 at 16:18
У вас здесь два асинхронных метода. Читайте про асинхронность. — Stepan Kasyanenko, Sep 26 '19 at 05:25
@StepanKasyanenko, как я понял нужно использовать промисы или async/await, но пока не совсем понимаю как в моем случае их правильно прикрутить. Цепочкой промисов? — Pesthedog, Sep 26 '19 at 07:13
Вы можете использовать колбеки, промисы(которые суть колбеки) или async/await(которые сахар для промисов, которые суть колбеки) — Stepan Kasyanenko, Sep 26 '19 at 07:40
@StepanKasyanenko, в моем случае мне надо (например) прикрутить коллбэк к fr.onload и image.onload. Как мне понять после прохождения всего цикла что массив объектов заполнен? — Pesthedog, Sep 26 '19 at 07:47

score 0 · Accepted Answer · answered Sep 26 '19 at 08:01

Вариант с использованием промисов и async\await.

async function showFiles(files) {
  let resultArray = [];
for (let i = 0; i < files.length; i++) {
    const file = files[i];
    let fr = new FileReader();
    const onload = new Promise((resolve, reject) => {
      fr.onload = function(e) {
        let image = new Image();
        image.src = e.target.result;
    image.onload = function() {
      resultArray.push({
        'src': e.target.result,
        'width': this.width,
        'height': this.height,
        'size': file.size
      });
      resolve();
    }

    image.onerror = reject;
  };
  fr.onerror = reject;
});
fr.readAsDataURL(file);
await onload;

}
  return resultArray;
};
async function fileChange() {
  const res = await showFiles(inputFile.files);
  console.log(res);
};

<input id="inputFile" type="file" multiple="true" onchange="fileChange()">

Undefined при попытке вывести элемент массива (FileReader)

1 Answers1