解决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 相关文章推荐
javascript 获取模态窗口的滚动位置代码
Aug 06 Javascript
js实现Select下拉框具有输入功能的方法
Feb 06 Javascript
jquery处理页面弹出层查询数据等待操作实例
Mar 25 Javascript
JavaScript通过事件代理高亮显示表格行的方法
May 27 Javascript
angular.bind使用心得
Oct 26 Javascript
Javascript之BOM(window对象)详解
May 25 Javascript
浅谈Angular 的变化检测的方法
Mar 01 Javascript
vue+axios实现文件下载及vue中使用axios的实例
Sep 21 Javascript
Vue项目引发的「过滤器」使用教程
Mar 12 Javascript
jquery操作checkbox的常用方法总结【附测试源码下载】
Jun 10 jQuery
小程序实现悬浮搜索框
Jul 12 Javascript
解决vue安装less报错Failed to compile with 1 errors的问题
Oct 22 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
PHP仿博客园 个人博客(1) 数据库与界面设计
2013/07/05 PHP
CI分页类首页、尾页不显示的解决方法
2016/03/28 PHP
Laravel框架中Blade模板的用法示例
2017/08/30 PHP
解决Laravel 使用insert插入数据,字段created_at为0000的问题
2019/10/11 PHP
javascript hashtable 修正版 下载
2010/12/30 Javascript
javascript 弹出的窗口返回值给父窗口具体实现
2013/11/23 Javascript
javascript数组去重方法汇总
2015/04/23 Javascript
jQuery中 $ 符号的冲突问题及解决方案
2016/11/04 Javascript
详细分析单线程JS执行问题
2017/11/22 Javascript
jquery动态添加以及遍历option并获取特定样式名称的option方法
2018/01/29 jQuery
小程序分享模块超级详解(推荐)
2019/04/10 Javascript
功能完善的小程序日历组件的实现
2020/03/31 Javascript
vue路由权限校验功能的实现代码
2020/06/07 Javascript
Python深入学习之特殊方法与多范式
2014/08/31 Python
python模拟鼠标拖动操作的方法
2015/03/11 Python
基于Python实现的百度贴吧网络爬虫实例
2015/04/17 Python
在Django中同时使用多个配置文件的方法
2015/07/22 Python
Python中生成Epoch的方法
2017/04/26 Python
python WindowsError的错误代码详解
2017/07/23 Python
python实现逆滤波与维纳滤波示例
2020/02/26 Python
django为Form生成的label标签添加class方式
2020/05/20 Python
用python写爬虫简单吗
2020/07/28 Python
Python爬虫使用bs4方法实现数据解析
2020/08/25 Python
10分钟入门CSS3 Animation
2018/12/25 HTML / CSS
Giglio德国网上精品店:奢侈品服装和配件
2016/09/23 全球购物
美国环保婴儿用品公司:The Honest Company
2017/11/23 全球购物
Tod’s英国官方网站:意大利奢华手工制作手袋和鞋履
2019/03/15 全球购物
大学四年学习的自我评价分享
2013/12/09 职场文书
计算机专业应届生求职信
2014/04/06 职场文书
热爱祖国的演讲稿
2014/05/04 职场文书
党员群众路线学习心得体会
2014/11/04 职场文书
2014年派出所工作总结
2014/11/21 职场文书
成品仓管员岗位职责
2015/04/01 职场文书
母亲去世追悼词
2015/06/23 职场文书
关于环保的广播稿
2015/12/17 职场文书
JavaScript实现酷炫的鼠标拖尾特效
2022/02/18 Javascript