Как сделать предпросмотр изображения перед загрузкой на VueJS

Создаём универсальный переиспользуемый компонент Vue.js для предпросмотра изображений перед их загрузкой. Это полезно при разработке приложений, где пользователи загружают аватары профиля или другие изображения.

Шаблон компонента

Основной шаблон включает свойство imageSrc для отображения изображения и событие @change="previewThumbnail" на поле file input:

Логика компонента

Компонент использует объект FileReader для доступа к данным изображения из DOM и конвертирует их в Base64 для предпросмотра:

Vue.component('image-input', {
  template: '#image-input-template',

  props: [ 'imageSrc' ],

  methods: {
    previewThumbnail: function(event) {
      var input = event.target;

      if (input.files && input.files[0]) {
        var reader = new FileReader();
        var vm = this;

        reader.onload = function(e) {
          vm.imageSrc = e.target.result;
        }

        reader.readAsDataURL(input.files[0]);
      }
    }
  }
});

Использование

Размещение компонента в шаблоне и инициализация Vue: