解决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+CSS制作DIV层可(最小化/拖拽/排序)功能实现代码
Feb 25 Javascript
jquery easyui combobox模糊过滤(示例代码)
Nov 30 Javascript
离开当前页面前使用js判断条件提示是否要离开页面
May 02 Javascript
javascript清空table表格的方法
May 14 Javascript
JavaScript中cookie工具函数封装的示例代码
Oct 11 Javascript
ionic cordova一次上传多张图片(类似input file提交表单)的实现方法
Dec 16 Javascript
JQuery 封装 Ajax 常用方法(推荐)
May 21 jQuery
利用node.js如何创建子进程详解
Dec 09 Javascript
Vue 创建组件的两种方法小结(必看)
Feb 23 Javascript
解决Vue在封装了Axios后手动刷新页面拦截器无效的问题
Nov 08 Javascript
微信小程序之几种常见的弹框提示信息实现详解
Jul 11 Javascript
vue+echarts实现中国地图流动效果(步骤详解)
Jan 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
php5 mysql分页实例代码
2008/04/10 PHP
ThinkPHP让分页保持搜索状态的方法
2014/07/02 PHP
如何批量清理系统临时文件(语言:C#、 C/C++、 php 、python 、java )
2016/02/01 PHP
php 使用fopen函数创建、打开文件详解及实例代码
2016/09/24 PHP
PHP  实现等比压缩图片尺寸和大小实例代码
2016/10/08 PHP
ExtJS下grid的一些属性说明
2009/12/13 Javascript
javascript整除实现代码
2010/11/23 Javascript
B/S模式项目中常用的javascript汇总
2013/12/17 Javascript
jquery 页面滚动到底部自动加载插件集合
2014/01/31 Javascript
使用jquery修改表单的提交地址基本思路
2014/06/04 Javascript
做web开发 先学JavaScript
2014/12/12 Javascript
jQuery实现的经典滑动门效果
2015/09/22 Javascript
Node.js的MongoDB驱动Mongoose基本使用教程
2016/03/01 Javascript
AngularJS优雅的自定义指令
2016/07/01 Javascript
javascript 小数乘法结果错误的处理方法
2016/07/28 Javascript
JS去除重复并统计数量的实现方法
2016/12/15 Javascript
js数组与字符串常用方法总结
2017/01/13 Javascript
利用n工具轻松管理Node.js的版本
2017/04/21 Javascript
详谈Node.js之操作文件系统
2017/08/29 Javascript
理理Vue细节(推荐)
2019/04/16 Javascript
JS实现在线ps功能详解
2019/07/31 Javascript
js模拟实现烟花特效
2020/03/10 Javascript
JavaScript 事件代理需要注意的地方
2020/09/08 Javascript
浅谈Python NLP入门教程
2017/12/25 Python
opencv之为图像添加边界的方法示例
2019/12/26 Python
罗马尼亚在线杂货店:Pilulka.ro
2019/09/28 全球购物
Oracle中delete,truncate和drop的区别
2016/05/05 面试题
linux面试题参考答案(8)
2015/08/11 面试题
为什么要做架构设计
2015/07/08 面试题
高中生班主任评语
2014/04/25 职场文书
老干部工作先进事迹
2014/08/17 职场文书
国庆节演讲稿范文2014
2014/09/19 职场文书
2014年仓库保管员工作总结
2014/12/03 职场文书
2015年小学中秋节活动总结
2015/03/23 职场文书
毕业班工作总结
2015/08/10 职场文书
MySQL系列之三 基础篇
2021/07/02 MySQL