Не удается просмотреть изображения в Vue.js - PullRequest
Новая
       12

Не удается просмотреть изображения в Vue.js

0 голосов
/ 01 января 2019

После изучения этого отличного учебного пособия по созданию многофайлового компонента загрузки в Vue.js я хотел бы иметь возможность разрешить пользователям просматривать изображения перед их загрузкой.Поэтому я пытаюсь добавить поле uri к каждому файлу фотографии, чтобы показать их в цикле v-for следующим образом: 

<div v-for="(file, index) in files"  :key="index">
     <img :src="file.uri" alt="Image">
</div>

Вот метод выбора файлов: 

 selectFile() {
      const files = this.$refs.files.files;
      this.uploadFiles = [...this.uploadFiles, ...files];


      this.files = [
           ...this.files,
           ..._.map(files, file => ({
             name: file.name,
             type: file.type,
             invalidMessage: this.validate(file)

           }))
      ];

     this.files.forEach( function (file) {
        let reader  = new FileReader();
        file.uri =   reader.readAsDataURL(file); //<-Problem here
     }  
     );

Вот сообщение об ошибке: 

Uncaught TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'.

Я знаю, что есть пара других вопросов об этой ошибке, но никто не помог мне, возможно, потому что никто не имеет дело с файлом в цикле, как яделать здесь с Vue.js.

Я также посмотрел на Mozilla docs , но не смог принять их пример в этой ситуации.

Очень ценю ваши подсказки, чтобы это исправить.

...