解决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 相关文章推荐
通过Mootools 1.2来操纵HTML DOM元素
Sep 15 Javascript
javascript获取当前日期时间及其它操作函数
Jan 11 Javascript
JavaScript地图拖动功能SpryMap的简单实现
Jul 17 Javascript
javascript 小数取整简单实现方式
May 30 Javascript
jQuery实现本地预览上传图片功能
Jan 08 Javascript
DeviceOne 让你一见钟情的App快速开发平台
Feb 17 Javascript
基于jquery日历价格、库存等设置插件
Jul 05 jQuery
深入理解Node.js中通用基础设计模式
Sep 19 Javascript
Bootstrap table表格初始化表格数据的方法
Jul 25 Javascript
简单两步使用node发送qq邮件的方法
Mar 01 Javascript
三分钟教你用Node做一个微信哄女友(基友)神器(面向小白)
Jun 21 Javascript
带你彻底理解JavaScript中的原型对象
Apr 14 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
Email+URL的判断和自动转换函数
2006/10/09 PHP
PHP session有效期问题
2009/04/26 PHP
php 文件上传代码(限制jpg文件)
2010/01/05 PHP
PHP调用全国天气预报数据接口查询天气示例
2019/02/20 PHP
window.js 主要包含了页面的一些操作
2009/12/23 Javascript
jQuery示例收集
2010/11/05 Javascript
重载toString实现JS HashMap分析
2011/03/13 Javascript
jquery 循环显示div的示例代码
2013/10/18 Javascript
JS在一定时间内跳转页面及各种刷新页面的实现方法
2016/05/26 Javascript
微信小程序 Windows2008 R2服务器配置TLS1.2方法
2016/12/05 Javascript
AngularJS页面带参跳转及参数解析操作示例
2017/06/28 Javascript
seajs实现强制刷新本地缓存的方法分析
2017/10/16 Javascript
js操作二进制数据方法
2018/03/03 Javascript
JQuery通过后台获取数据遍历到前台的方法
2018/08/13 jQuery
如何在selenium中使用js实现定位
2020/08/18 Javascript
基于Cesium绘制抛物弧线
2020/11/18 Javascript
python正则表达式面试题解答
2020/04/28 Python
Python实现图片拼接的代码
2018/07/02 Python
python3 小数位的四舍五入(用两种方法解决round 遇5不进)
2019/04/11 Python
纯python进行矩阵的相乘运算的方法示例
2019/07/17 Python
Python Django Cookie 简单用法解析
2019/08/13 Python
python多线程使用方法实例详解
2019/12/30 Python
python range实例用法分享
2020/02/06 Python
Python中文分词库jieba,pkusegwg性能准确度比较
2020/02/11 Python
Python新手如何进行闭包时绑定变量操作
2020/05/29 Python
使用keras框架cnn+ctc_loss识别不定长字符图片操作
2020/06/29 Python
python实现三种随机请求头方式
2021/01/05 Python
惠普香港官方商店:HP香港
2019/04/30 全球购物
Linux如何修改文件和文件夹的权限
2012/06/27 面试题
建材业务员岗位职责
2013/12/08 职场文书
《自然之道》教学反思
2014/02/11 职场文书
读书小明星事迹材料
2014/05/03 职场文书
七一建党节演讲稿
2014/09/11 职场文书
八荣八耻演讲稿
2014/09/15 职场文书
领导班子民主生活会整改措施(工商局)
2014/09/21 职场文书
2015年煤矿工作总结
2015/04/28 职场文书