Vuejsを使用してローカルストレージから画像をアップロード

Question

[ファイルを選択]をクリックしてアップロードする画像を選択すると、パスが表示されます。 「ファイルを選択」をもう一度クリックした後でのみ、画像がアップロードされます。

これを解決し、ファイルを選択した時点でアップロードする方法はありますか？

ご協力いただければ幸いです。ありがとうございました。

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>

JSfiddleに私のコード。

Answer 1

あなたはclickイベントをリッスンすることに頼るべきではありません。あなたが探していると、代わりにchangeイベントであり、つまり代わりに@clickの@changeを使用：https://jsfiddle.net/hrtzezk8/5/、または下記の概念実証スニペット：

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>

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

が更新フィドルを参照してください。