使用Vuejs從本地存儲器上傳圖像

當您單擊「選擇文件」並選擇要上載的圖像時，該路徑會顯示。只有在您再次單擊「選擇文件」後才能上傳圖像。使用Vuejs從本地存儲器上傳圖像

如何解決此問題並在文件被選擇時上傳？

任何幫助將不勝感激。謝謝。

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代碼。

來源

2017-10-18 Inchara Raveendra

您不應該依靠收聽click事件。你要找的是change事件代替，即用@change代替@click：

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

見更新小提琴：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>

來源

2017-10-18 08:50:30 Terry

使用Vuejs從本地存儲器上傳圖像

回答

相關問題