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


Posted in Javascript onMay 16, 2018

问题描述

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

<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事件只执行一次的问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
多个checkbox被选中时如何判断是否有自己想要的
Sep 22 Javascript
jQuery常用且重要方法汇总
Jul 13 Javascript
jquery获取img的src值的简单实例
May 17 Javascript
使用bootstrapValidator插件进行动态添加表单元素并校验
Sep 28 Javascript
node.js入门教程之querystring模块的使用方法
Feb 27 Javascript
layer弹出层框架alert与msg详解
Mar 14 Javascript
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
Jul 20 jQuery
jquery实现用户登陆界面(示例讲解)
Sep 06 jQuery
深入理解JavaScript的值传递和引用传递
Oct 24 Javascript
vue项目中使用vue-i18n报错的解决方法
Jan 13 Javascript
vue实现导航菜单和编辑文本的示例代码
Jul 04 Javascript
吃通javascript正则表达式
Apr 21 Javascript
vue-cli与webpack处理静态资源的方法及webpack打包的坑
May 15 #Javascript
JavaScript常用截取字符串的三种方式用法区别实例解析
May 15 #Javascript
vue中keep-alive的用法及问题描述
May 15 #Javascript
react中使用swiper的具体方法
May 15 #Javascript
vue addRoutes实现动态权限路由菜单的示例
May 15 #Javascript
浅谈AngularJS中$http服务的简单用法
May 15 #Javascript
Vue项目webpack打包部署到Tomcat刷新报404错误问题的解决方案
May 15 #Javascript
You might like
我的论坛源代码(四)
2006/10/09 PHP
php中$_GET与$_POST过滤sql注入的方法
2014/11/03 PHP
PHP调试的强悍利器之PHPDBG
2016/02/22 PHP
php实现文件管理与基础功能操作
2017/03/21 PHP
浅谈Laravel队列实现原理解决问题记录
2017/08/19 PHP
屏蔽鼠标右键、Ctrl+n、shift+F10、F5刷新、退格键 的javascript代码
2007/04/01 Javascript
JS与框架页的操作代码
2010/01/17 Javascript
Jquery性能优化详解
2014/05/15 Javascript
javascript框架设计读书笔记之种子模块
2014/12/02 Javascript
JS随机调用指定函数的方法
2015/07/01 Javascript
jQuery Validate插件实现表单强大的验证功能
2015/12/18 Javascript
jquery ajax局部加载方法详解(实现代码)
2016/05/12 Javascript
Bootstrap学习笔记之js组件(4)
2016/06/12 Javascript
全面解析Bootstrap中Carousel轮播的使用方法
2016/06/13 Javascript
jQuery获取元素父节点的方法
2016/06/21 Javascript
简单实现js无缝滚动效果
2017/02/05 Javascript
JS删除数组里的某个元素方法
2018/02/03 Javascript
vue非父子组件通信问题及解决方法
2018/06/11 Javascript
微信小程序显示倒计时功能示例【测试可用】
2018/12/03 Javascript
vue通过v-html指令渲染的富文本无法修改样式的解决方案
2020/05/20 Javascript
vue 自定指令生成uuid滚动监听达到tab表格吸顶效果的代码
2020/09/16 Javascript
python连接远程ftp服务器并列出目录下文件的方法
2015/04/01 Python
Python OpenCV获取视频的方法
2018/02/28 Python
三步实现Django Paginator分页的方法
2019/06/11 Python
Python递归调用实现数字累加的代码
2020/02/25 Python
Elasticsearch py客户端库安装及使用方法解析
2020/09/14 Python
Tea Collection官网:一家位于旧金山的童装公司
2020/08/07 全球购物
EJB timer的种类
2014/10/28 面试题
新闻网站实习自我鉴定
2013/09/25 职场文书
教师自我鉴定
2013/12/13 职场文书
关于迟到的检讨书
2014/01/26 职场文书
工会2014法制宣传日活动总结
2014/11/01 职场文书
2015年党建工作总结
2015/03/30 职场文书
法定代表人资格证明书
2015/06/18 职场文书
社区宣传标语口号
2015/12/26 职场文书
学校2016年全国助残日活动总结
2016/04/01 职场文书