FileReader () внутри вычисляемого свойства Vue не работает

Question

Я пытаюсь отобразить серию миниатюр изображений на основе изображений, которые перетаскиваю на экран.

Мои данные выглядят так:

data() {
  return {
    files: [File1, File2, File3]
  }
}

... где каждый File - это blob.

Вот мое свойство computed, которое должно просто возвращать мне каждый File blob s результат

thumbnails() {
  return files.map(file => {
    let reader = new FileReader();
    reader.readAsDataURL(file);

     return reader.result
  })
}

Затем я пытаюсь отобразитьна экране:

<ul>
  <li v-for="thumbnail in thumbnails>
    <img :src="thumbnail">
  </li>
</ul>

Не работает.

Что чрезвычайно интересно, однако, это то, что если я вставлю точку останова в files.map(...), она будет работать!Чего мне не хватает?

Answer 1

Чего мне не хватает?

Тот факт, что FileReader.readAsDataURL() метод асинхронный .

Я бы порекомендовал вам переосмыслить ваш поток, или вы можете использовать пакет vue-async-computed.

С его помощью вы можете написать это так:

{
  asyncComputed: {
    thumbnails() {
      return Promise.all(this.files.map((file) => {
        return new Promise((resolve, reject) => {
          const reader = new FileReader();
          // handle success
          reader.addEventListener('load', () => {
            resolve(reader.result);
          }, false);
          // handle error
          reader.addEventListener('error', () => {
            reject();
          }, false);
          // reading file
          reader.readAsDataURL(file);
        });
      }));
    },
  }
}

Не забывайте, что до разрешения Promise.all значение thumbnails будет null, поэтому вы должны добавить проверку для этого в свой шаблон.