当前位置： 移动技术网 > IT编程>脚本编程>vue.js > 解决vue项目中type=”file“ change事件只执行一次的问题

解决vue项目中type=”file“ change事件只执行一次的问题

2018年05月29日  | 移动技术网IT编程  | 我要评论

吉祥馄饨外卖,极品战神txt下载,政坛之官欲

问题描述

在最近的项目开发中遇到了这样的一个问题，当我上传了一个文件时，我将获取到的文件名清空后，却无法再次上传相同的文件

<template>
 <div class="hello">
   <input type="button" value="上传文件" name="" id="" @click="updata">
   <input type="file" style="display:none" @change="getfile" id="input-file">
   <div v-if="filename">
    <p>上传的文件名：{{filename}}</p>
    <button @click="delfile">清空文件</button>
   </div>
 </div>
</template>
<script>
import $ from 'n-zepto'
export default {
 name: 'helloworld',
 data () {
  return {
   filename: ''
  }
 },
 methods:{
  updata(){ // 唤起change事件
   $('#input-file').click()
  },
  getfile(e){ // change事件
   this.dosomething()
  },
  dosomething(){ // do something
   this.filename = e.target.files[0].name
  },
  delfile(){
   this.filename=''
  }
 }
}
</script>

因为我只是将data中的属性值清空而已，文件名没有变当然会不出发change事件

解决办法

目前网上有好多解决办法，但基本上都无法在vue上使用，于是我想到了v-if

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

于是在代码中加入了一个小的开关，唤起change事件时就将他销毁

事件结束时再将它重建，这样问题就轻松的解决了

<template>
 <div class="hello">
   <input type="button" value="上传文件" name="" id="" @click="updata">
   <input v-if="ishowfile" type="file" style="display:none" @change="getfile" id="input-file">
   <div v-if="filename">
    <p>上传的文件名：{{filename}}</p>
    <button @click="delfile">清空文件</button>
   </div>
 </div>
</template>

<script>
import $ from 'n-zepto'
export default {
 name: 'helloworld',
 data () {
  return {
   filename: '',
   ishowfile: true,
  }
 },
 methods:{
  updata(){ // 唤起change事件
   $('#input-file').click()
   this.ishowfile = false // 销毁
  },
  getfile(e){ // change事件
   this.dosomething()
   this.ishowfile = false // 重建
  },
  dosomething(){ // do something
   this.filename = e.target.files[0].name
  },
  delfile(){
   this.filename=''
  }
 }
}
</script>

总结

以上所述是小编给大家介绍的vue项目中解决type=”file“ change事件只执行一次的问题，希望对大家有所帮助

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网