Entrée de fichier sur change in vue.js

Question

En utilisant un langage HTML/JS simple, il est possible d'afficher les objets de fichier JavaScript des fichiers sélectionnés pour un élément d'entrée, comme ceci:

<input type="file" id="input" multiple onchange="handleFiles(this.files)">

Cependant, lors de sa conversion en mode 'Vue', il ne semble pas fonctionner comme prévu et renvoie simplement undefined au lieu de renvoyer un tableau d'objets File.

Voici à quoi cela ressemble dans mon modèle Vue:

<input type="file" id="file" class="custom-file-input" 
  v-on:change="previewFiles(this.files)" multiple>

Où la fonction previewFiles est simplement la suivante (située dans méthodes):

  methods: {
    previewFiles: function(files) {
      console.log(files)
    }
  }

Y a-t-il une autre façon/correcte de faire cela? Merci

Answer 1

Essaye ça.

<input type="file" id="file" ref="myFiles" class="custom-file-input" 
  @change="previewFiles" multiple>

et dans vos options de composant:

data() {
  return {
    files: [],
  }
},
methods: {
  previewFiles() {
    this.files = this.$refs.myFiles.files
  }
}

Answer 2

Une autre solution:

<input type="file" @change="previewFiles" multiple>

methods: {
   previewFiles(event) {
      console.log(event.target.files);
   }
}