解决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获取网页中的js、css、Flash等文件
Dec 20 Javascript
模拟jQuery ajax服务器端与客户端通信的代码
Mar 28 Javascript
关于在IE下的一个安全BUG --可用于跟踪用户的系统鼠标位置
Apr 17 Javascript
js快速排序的实现代码
Dec 08 Javascript
Jsonp 关键字详解及json和jsonp的区别,ajax和jsonp的区别
Dec 30 Javascript
JavaScript必知必会(五) eval 的使用
Jun 08 Javascript
详解Vue组件实现tips的总结
Nov 01 Javascript
微信小程序在线客服自动回复功能(基于node)
Jul 03 Javascript
开源一个微信小程序仪表盘组件过程解析
Jul 30 Javascript
详解小程序云开发攻略(解决最棘手的问题)
Sep 30 Javascript
js 计算月/周的第一天和最后一天代码
Feb 01 Javascript
详解vue中使用transition和animation的实例代码
Dec 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
php中使用explode查找某个字符是否存在的方法
2011/07/12 PHP
给大家分享几个常用的PHP函数
2017/01/15 PHP
浅谈关于PHP解决图片无损压缩的问题
2017/09/01 PHP
js parseInt(&quot;08&quot;)未指定进位制问题
2010/06/19 Javascript
JQuery入门——用bind方法绑定事件处理函数应用介绍
2013/02/05 Javascript
jQuery 全选/反选以及单击行改变背景色实例
2013/07/02 Javascript
jquery实现兼容IE8的异步上传文件
2015/06/15 Javascript
jQuery实现的文字hover颜色渐变效果实例
2016/02/20 Javascript
引用jquery框架后出错的解决方法
2016/08/09 Javascript
使用Nodejs连接mongodb数据库的实现代码
2017/08/21 NodeJs
详解使用nvm管理多版本node的方法
2017/08/30 Javascript
原生JS检测CSS3动画是否结束的方法详解
2019/01/27 Javascript
微信小程序实现简易table表格
2020/06/19 Javascript
js验证账户名是否重复
2020/05/26 Javascript
VueJS实现用户管理系统
2020/05/29 Javascript
Python自动登录126邮箱的方法
2015/07/10 Python
横向对比分析Python解析XML的四种方式
2016/03/30 Python
python flask实现分页效果
2017/06/27 Python
python 读取DICOM头文件的实例
2018/05/07 Python
python使用xlsxwriter实现有向无环图到Excel的转换
2018/12/12 Python
python爬取盘搜的有效链接实现代码
2019/07/20 Python
Python Django 命名空间模式的实现
2019/08/09 Python
Pytorch保存模型用于测试和用于继续训练的区别详解
2020/01/10 Python
灵活运用CSS3特性绘制简易版围棋效果
2016/09/28 HTML / CSS
实例讲解CSS3中的border-radius属性
2015/08/18 HTML / CSS
利用canvas实现图片下载功能来实现浏览器兼容问题
2019/05/31 HTML / CSS
澳大利亚买卖正宗二手奢侈品交易平台:Luxe.It.Fwd
2019/10/16 全球购物
Java基础知识面试要点
2016/07/29 面试题
给男朋友的道歉信
2014/01/12 职场文书
计算机网络专业求职信
2014/06/05 职场文书
电子商务求职信
2014/06/15 职场文书
办理房产过户的委托书
2014/09/14 职场文书
运动员代表致辞
2015/07/29 职场文书
办公室日常管理制度
2015/08/04 职场文书
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
2021/03/31 jQuery
redis使用不当导致应用卡死bug的过程解析
2021/07/01 Redis