JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>
<div id="app">
  <div><input type="file" id="image" @change="onChange"></div>
  <div><label for="image">{{ filename || 'Выберите файл' }}</label></div>
  <div v-if="image"><img :src="image"></div>
</div>

CSS

label {
  font-family: monospace;
  font-size: 64px;
  color: red;
}

JavaScript

new Vue({
  el: '#app',
  data: {
    validTypes: [ 'jpg', 'jpeg', 'png' ],
    image: null,
    filename: null,
  },
  methods: {
    onChange(e) {
      const
        file = e.target.files[0],
        [ , name, ext ] = file.name.match(/(.+)\.(.+)$/);

      if (this.validTypes.includes(ext)) {
        this.image = URL.createObjectURL(file);
        this.filename = name;
      } else {
        alert('Некорректный тип файла');
      }
    },
  },
});