Предварительный просмотр изображения перед загрузкой VueJs

Question

Я пытаюсь предварительно просмотреть изображение перед загрузкой, хочу показать маленькое изображение и щелкнуть по нему, чтобы получить полный размер, но до сих пор оно не работало. Я использую vue -upload-component , file.thumb из них тоже не работал.

data() {
    return {
        url:null,
    }
}
watch: {
    files: {
        handler: function(){
            this.files.forEach((file,index) =>{
                const file = e.target.file[0];
                this.url = URL.createObjectURL(file);
                console.log('Files:',this.files);
            })
        },
    }
}

//First try found on stack
<div id="preview">
    <img v-if="url" :src="url" />
</div> 

//This is from them , but is not working.
<img v-if="file.thumb" :src="file.thumb" width="40" height="auto" />
<span v-else>No Image</span>

ОБНОВЛЕНИЕ Теперь маленькое изображение работает, мне просто нужно добавить некоторые вещи из этой библиотеки. Теперь мне просто нужно предварительно просмотреть полный размер клика.

<img v-if="file.thumb" :src="file.thumb" width="40" height="auto" />

Answer 1

Можете ли вы попробовать это?

handler: function(){
  this.files.forEach((file,index) =>{
    const file = event.target.files[0];
    if (file) {
      let reader = new FileReader();
        reader.onload = (e: any) => {
          this.url = e.target.result; //Base64 string
        }
    }
  })
}

Answer 2

Вы используете this из области действия forEach, попробуйте инициализировать глобальный ViewModel, чтобы иметь возможность доступа к параметрам данных, например:

watch: {
    files: {
        handler: function(){
            let vm = this;
            this.files.forEach((file,index) =>{
                const file = e.target.file[0];
                vm.url = URL.createObjectURL(file);
                console.log('Files:',vm.files);
            })
        },
    }
}