使用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代码。

答

您不应该依靠收听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>

使用Vuejs从本地存储器上传图像

相关推荐