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 이벤트를 수신하는 데 의존해서는 안됩니다. 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" /> 

: 당신이 찾고있는 무슨 대신 change 이벤트, 즉 @change 대신 @click을 사용하는 것입니다