Télécharger une image à partir du stockage local à l'aide de Vuejs

Question

Lorsque vous cliquez sur "Choisir un fichier" et que vous sélectionnez une image à transférer, le chemin apparaît cependant. L'image est téléchargée seulement après avoir cliqué sur "Choisir le fichier" une fois de plus.

Comment résoudre ce problème et le télécharger au fur et à mesure que le fichier est choisi?

Toute aide serait grandement appréciée. Je vous remercie.

new Vue({ 
 
    el: '.app', 
 
    data: { 
 
    userImage: '' 
 
    }, 
 
    methods: { 
 
    onFileChange(e) { 
 
     var files = e.target.files || e.dataTransfer.files 
 
     if (!files.length) { 
 
      return 
 
     } 
 
     this.createImage(files[0]) 
 
     }, 
 
     createImage(file) { 
 
     var reader = new FileReader() 
 
     var vm = this 
 

 
     reader.onload = (e) => { 
 
      vm.userImage = e.target.result 
 
     } 
 
     reader.readAsDataURL(file) 
 
     }, 
 
     removeImage: function (e) { 
 
     this.userImage = '' 
 
     } 
 
    } 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script> 
 
<div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 col-xs-6 text-center app"> 
 

 
    <img class="profile-image" :src="userImage" /> 
 

 
    <div v-if="!userImage"> 
 
    <input type="file" round class="change-profile-image" @change="onFileChange" /> 
 
    </div> 
 
    <div v-else> 
 
    <button class="delete-profile-image" color="secondary" icon="delete" @click="removeImage">Delete</button> 
 
    </div> 
 

 
</div>

Mon code sur JSfiddle.

Answer 1

Vous ne devriez pas compter sur l'écoute de l'événement click. Ce que vous cherchez est l'événement change à la place, à savoir utiliser @change au lieu de @click:

<input type="file" round class="change-profile-image" @change="onFileChange" /> 

Voir violon mise à jour: https://jsfiddle.net/hrtzezk8/5/, ou la preuve de concept extrait ci-dessous:

new Vue({ 
 
    el: '.app', 
 
    data: { 
 
    userImage: '' 
 
    }, 
 
    methods: { 
 
    onFileChange(e) { 
 
     var files = e.target.files || e.dataTransfer.files 
 
     if (!files.length) { 
 
      return 
 
     } 
 
     this.createImage(files[0]) 
 
     }, 
 
     createImage(file) { 
 
     var reader = new FileReader() 
 
     var vm = this 
 

 
     reader.onload = (e) => { 
 
      vm.userImage = e.target.result 
 
     } 
 
     reader.readAsDataURL(file) 
 
     }, 
 
     removeImage: function (e) { 
 
     this.userImage = '' 
 
     } 
 
    } 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script> 
 
<div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 col-xs-6 text-center app"> 
 

 
    <img class="profile-image" :src="userImage" /> 
 

 
    <div v-if="!userImage"> 
 
    <input type="file" round class="change-profile-image" @change="onFileChange" /> 
 
    </div> 
 
    <div v-else> 
 
    <button class="delete-profile-image" color="secondary" icon="delete" @click="removeImage">Delete</button> 
 
    </div> 
 

 
</div>