Как сохранить объект FileList внутри данных Vue

Question

Здравствуйте, я пытаюсь сохранить объект FileList внутри объекта данных vue, но он сохраняется как строка "Файл"

Я добавляю ссылку в html вот так

<input type="file" @change="fileChange($event.target)">

И в JavaScript

new Vue({
   el: '#someEl',
   data: {
      file: null
   },
   methods: {
      fileChange (file) {
        this.file = file.files[0]
      }
   }
})

В результате я получаю это:

Answer 1

Вам нужно просто передать аргумент $event в fileChange() вместо $event.target.
Теперь вы можете получить доступ к объекту файла, используя evt.target.files[0]; внутри fileChange() функции.

var vm = new Vue({
    el: '#app',
    data: {
      file: {}
   },
   methods: {
      fileChange (evt) {
        this.file = evt.target.files[0];
        console.log('file Object:==>',this.file);
      }
   }
    
});

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js" type="text/javascript"></script>

<div id="app">				

  
  <p>
   <input type="file" @change="fileChange($event)">
   name: <b>{{file.name}}</b>
  </p>
  <p>
    size: <b>{{file.size}} </b> 
    & type: <b>{{file.type}}</b>
  </p>
</div>