web-dev-qa-db-fra.com

v-model ne prend pas en charge input type = "file"

Je ne peux pas utiliser v-model avec entrée de fichier, Vue dit que je dois utiliser v-on:change. Ok donc je peux utiliser v-on:change, mais comment lier le "contenu" du fichier d'entrée à une propriété data?

Disons que je veux le lier dans un composant à this.file:

export default {
  data() {
    file: null
  },
  // ...
}

Voici la partie HTML:

<input id="image" v-on:change="???" type="file">
<!--                           ^- don't know how to bind without v-model -->

Comment dois-je faire la reliure?

javascriptvue.jsvuejs2
10
rap-2-h

Dans l'événement onchange, vous devez passer l'objet événement à une fonction et gérer:

onFileChange(e) {
  var files = e.target.files || e.dataTransfer.files;
  if (!files.length)
    return;
  this.createImage(files[0]);
},

Pour plus d'informations, reportez-vous à https://codepen.io/Atinux/pen/qOvawK/

18
Arun Ghosh

En utilisant v-model avec une entrée de fichier n'a aucun sens, car vous ne pouvez pas définir de valeur sur une entrée de fichier - alors que devrait faire une liaison bidirectionnelle ici?

Utilisez simplement v-on:change

7
Linus Borg