解决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 相关文章推荐
EasySlider 基于jQuery功能强大简单易用的滑动门插件
Jun 11 Javascript
TreeView 用法(有代码)(asp.net)
Jul 15 Javascript
jQuery实现仿微软首页感应鼠标变化滑动窗口效果
Oct 08 Javascript
javascript闭包(Closure)用法实例简析
Nov 30 Javascript
JavaScript中的Object对象学习教程
May 20 Javascript
微信小程序进行微信支付的步骤昂述
Dec 01 Javascript
移动端日期插件Mobiscroll.js使用详解
Dec 19 Javascript
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
Aug 23 jQuery
Node.js Express安装与使用教程
May 11 Javascript
JS中比较两个Object数组是否相等方法实例
Nov 11 Javascript
浅析JavaScript预编译和暗示全局变量
Sep 03 Javascript
JavaScript实现图片合成下载的示例
Nov 19 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
用Zend Encode编写开发PHP程序
2006/10/09 PHP
php blowfish加密解密算法
2016/07/02 PHP
PHP强制转化的形式整理
2020/05/22 PHP
PHP实现长轮询消息实时推送功能代码实例讲解
2021/02/26 PHP
JavaScript 打地鼠游戏代码说明
2010/10/12 Javascript
Jquery css函数用法(判断标签是否拥有某属性)
2011/05/28 Javascript
JavaScript使用HTML5的window.postMessage实现跨域通信例子
2014/04/11 Javascript
Jquery节点遍历next与nextAll方法使用示例
2014/07/22 Javascript
javascript解析json实例详解
2014/11/05 Javascript
Javascript实现图片轮播效果(一)让图片跳动起来
2016/02/17 Javascript
jQuery中数据缓存$.data的用法及源码完全解析
2016/04/29 Javascript
IScroll5 中文API参数说明和调用方法
2016/05/21 Javascript
使用smartupload组件实现jsp+jdbc上传下载文件实例解析
2017/01/05 Javascript
利用Angular2的Observables实现交互控制的方法
2018/12/27 Javascript
基于python实现微信模板消息
2015/12/21 Python
pytorch numpy list类型之间的相互转换实例
2019/08/18 Python
python 实现矩阵按对角线打印
2019/11/29 Python
Python测试Kafka集群(pykafka)实例
2019/12/23 Python
Python下利用BeautifulSoup解析HTML的实现
2020/01/17 Python
Python 中如何写注释
2020/08/28 Python
如何快速理解python的垃圾回收机制
2020/09/01 Python
python 提高开发效率的5个小技巧
2020/10/19 Python
python 解决函数返回return的问题
2020/12/05 Python
python给list排序的简单方法
2020/12/10 Python
NBA欧洲商店(英国):NBA Europe Store UK
2018/07/27 全球购物
娇韵诗法国官网:Clarins法国
2019/01/29 全球购物
会计系毕业个人自荐信格式
2013/09/23 职场文书
门卫人员岗位职责
2013/12/24 职场文书
恐龙的灭绝教学反思
2014/02/12 职场文书
学习十八大坚定理想信念心得体会
2014/03/11 职场文书
国旗下的讲话演讲稿
2014/05/08 职场文书
关于建议书的格式范文
2014/05/20 职场文书
领导干部学习心得体会
2016/01/23 职场文书
MySQL数据库中varchar类型的数字比较大小的方法
2021/11/17 MySQL
Vue+TypeScript中处理computed方式
2022/04/02 Vue.js
Rust中的Struct使用示例详解
2022/08/14 Javascript