解决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 相关文章推荐
使用js获取QueryString的方法小结
Feb 28 Javascript
web页面数据展示新想法(json)
Jun 08 Javascript
让你的CSS像Jquery一样做筛选的实现方法
Jul 10 Javascript
javascript全局变量封装模块实现代码
Nov 28 Javascript
解决jquery版本冲突的有效方法
Sep 02 Javascript
node.js操作mysql(增删改查)
Jul 24 Javascript
Jquery1.9.1源码分析系列(十五)动画处理之外篇
Dec 04 Javascript
JavaScript新增样式规则(推荐)
Jul 19 Javascript
Vue动态控制input的disabled属性的方法
Jun 26 Javascript
vue-better-scroll 的使用实例代码详解
Dec 03 Javascript
jQuery实现鼠标滑动切换图片
May 27 jQuery
vue3.0自定义指令(drectives)知识点总结
Dec 27 Vue.js
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实现根据字符串生成对应数组的方法
2014/09/22 PHP
用PHP生成excel文件到指定目录
2015/06/22 PHP
PHP中获取文件创建日期、修改日期、访问时间的方法
2016/11/05 PHP
[原创]php集成安装包wampserver修改密码后phpmyadmin无法登陆的解决方法
2016/11/23 PHP
PHPstorm快捷键(分享)
2017/07/17 PHP
PHP获取星期几的常用方法小结
2018/12/18 PHP
js模拟实现Array的sort方法
2007/12/11 Javascript
jQuery中调用WebService方法小结
2011/03/28 Javascript
多个jquery.datatable共存,checkbox全选异常的快速解决方法
2013/12/10 Javascript
toggle()隐藏问题的解决方法
2014/02/17 Javascript
JavaScript 实现鼠标拖动元素实例代码
2014/02/24 Javascript
JQuery右键菜单插件ContextMenu使用指南
2014/12/19 Javascript
jQuery中live()方法用法实例
2015/01/19 Javascript
js贪吃蛇网页版游戏特效代码分享(挑战十关)
2015/08/24 Javascript
js实现向右横向滑出的二级菜单效果
2015/08/27 Javascript
javascript遍历json对象的key和任意js对象属性实例
2017/03/09 Javascript
[02:19]DOTA2女子战队FOX视频专访:希望更多美眉一起加入
2013/10/15 DOTA
详解python中 os._exit() 和 sys.exit(), exit(0)和exit(1) 的用法和区别
2017/06/23 Python
python 去除二维数组/二维列表中的重复行方法
2019/01/23 Python
PyQt5创建一个新窗口的实例
2019/06/20 Python
查看Python依赖包及其版本号信息的方法
2019/08/13 Python
在Python中使用turtle绘制多个同心圆示例
2019/11/23 Python
python pygame实现挡板弹球游戏
2019/11/25 Python
Python计算矩阵的和积的实例详解
2020/09/10 Python
Django利用elasticsearch(搜索引擎)实现搜索功能
2020/11/26 Python
Html5+JS实现手机摇一摇功能
2015/04/24 HTML / CSS
露营世界:Camping World
2017/02/02 全球购物
雅诗兰黛香港官网:Estee Lauder香港
2017/09/26 全球购物
Whittard官方海外旗舰店:英国百年茶叶品牌
2018/02/22 全球购物
轻松制作精彩视频:Animoto
2018/09/19 全球购物
应届毕业生求职信范例分享
2013/12/17 职场文书
2014年会演讲稿范文
2014/01/06 职场文书
导游词创作书写原则以及开场白技巧怎么学?
2019/09/25 职场文书
详解python的异常捕获
2022/03/03 Python
分享MySQL常用 内核 Debug 几种常见方法
2022/03/17 MySQL
Python Pandas解析读写 CSV 文件
2022/04/11 Python