Почему неправильно происходит вывод текста из файла?

Question

[Anton8989]

При загрузке файла через input в консоли происходит неверный вывод текста из файла при первой попытке, при повторной попытке (при загрузке другого файла), выводится текст из предыдущего. В чем ошибка?

<form enctype="multipart/form-data">
        <input type="file" @change="onFileChange">
</form>

new Vue({
        el: '#app',
        data: {
            fileinput: ''
        },
        methods: {
            onFileChange(e) {
            var files = e.target.files || e.dataTransfer.files;
            if (!files.length)
                return;
            this.createInput(files[0]);

            },

            createInput(file) {
               let reader = new FileReader()
                reader.onload = (event) => {
                  this.fileinput = event.target.result
                }
                reader.readAsText(file)
                console.log(this.fileinput)
            }
            
        }
    })

Answer 1

[0xD34F]

Всё правильно. Если бы вы составили себе труд ознакомиться с документацией, то знали бы, что

Объект FileReader позволяет веб-приложениям асинхронно читать содержимое файлов

Так что console.log выполнять надо внутри обработчика load:

onFileChange({ target: { files: [ file ] } }) {
  if (file) {
    const reader = new FileReader();
    reader.addEventListener('load', e => {
      this.fileinput = e.target.result;
      console.log(this.fileinput);
    });
    reader.readAsText(file);
  }
},