解决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 相关文章推荐
JQuery 学习笔记 选择器之三
Jul 23 Javascript
flash调用js中的方法,让js传递变量给flash的办法及思路
Aug 07 Javascript
JavaScript中instanceof运算符的使用示例
Jun 08 Javascript
Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记
Jul 08 Javascript
javaScript+turn.js实现图书翻页效果实例代码
Feb 16 Javascript
深入对Vue.js $watch方法的理解
Mar 20 Javascript
基于Vue的文字跑马灯组件(npm 组件包)
May 24 Javascript
原生JS实现瀑布流插件
Feb 06 Javascript
js中DOM事件绑定分析
Mar 18 Javascript
vue+axios+mock.js环境搭建的方法步骤
Aug 28 Javascript
layui添加动态菜单与选项卡 AJAX请求的例子
Sep 25 Javascript
vue配置型表格基于el-table拓展之table-plus组件
Apr 12 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
30 个很棒的PHP开源CMS内容管理系统小结
2011/10/14 PHP
防止本地用户用fsockopen DDOS攻击对策
2011/11/02 PHP
php下载文件的代码示例
2012/06/29 PHP
关于js和php对url编码的处理方法
2014/03/04 PHP
php中遍历二维数组并以表格的形式输出的方法
2017/01/03 PHP
jquery 插件学习(三)
2012/08/06 Javascript
Jquery 模板数据绑定插件的使用方法详解
2013/07/08 Javascript
js实现上传图片预览的方法
2015/02/09 Javascript
AngularJS基础 ng-options 指令详解
2016/08/02 Javascript
Angular 应用技巧总结
2016/09/14 Javascript
基于JS实现移动端向左滑动出现删除按钮功能
2017/02/22 Javascript
JavaScript正则获取地址栏中参数的方法
2017/03/02 Javascript
bootstrap+jquery项目引入文件报错的解决方法
2018/01/22 jQuery
React优化子组件render的使用
2019/05/12 Javascript
微信小程序实现时间进度条功能
2020/11/17 Javascript
使用原生JS实现火锅点餐小程序(面向对象思想)
2019/12/10 Javascript
[00:32]10月24、25日 辉夜杯外卡赛附加赛开赛!
2015/10/23 DOTA
[01:34]传奇从这开始 2016国际邀请赛中国区预选赛震撼开启
2016/06/26 DOTA
[01:56]无止竞 再出发——中国军团出征2017年DOTA2国际邀请赛
2017/07/05 DOTA
[55:16]Mski vs VGJ.S Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
基于wxpython开发的简单gui计算器实例
2015/05/30 Python
Python科学计算之Pandas详解
2017/01/15 Python
Python 私有函数的实例详解
2017/09/11 Python
Python面向对象编程基础解析(一)
2017/10/26 Python
Django框架模板语言实例小结【变量,标签,过滤器,继承,html转义】
2019/05/23 Python
Pytorch Tensor基本数学运算详解
2019/12/30 Python
老师的检讨书
2014/02/23 职场文书
外联部演讲稿
2014/05/24 职场文书
就业协议书盖章的注意事项
2014/09/28 职场文书
违纪学生保证书
2015/02/27 职场文书
领导干部失职检讨书
2015/05/05 职场文书
关于分班的感言
2015/08/04 职场文书
关于教师节的广播稿
2015/08/19 职场文书
导游词之无锡梅园
2019/11/28 职场文书
python实现的web监控系统
2021/04/27 Python
Python机器学习之基础概述
2021/05/19 Python