解决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对象属性个数的示例代码
Nov 21 Javascript
用js设置下拉框为只读的小技巧
Apr 10 Javascript
jquery操作select大全
Apr 25 Javascript
JS实现模拟风力的雪花飘落效果
May 13 Javascript
JS实现状态栏跑马灯文字效果代码
Oct 24 Javascript
JS Array.slice 截取数组的实现方法
Jan 02 Javascript
JavaScript从数组的indexOf()深入之Object的Property机制
May 11 Javascript
JSON 的正确用法探讨:Pyhong、MongoDB、JavaScript与Ajax
May 15 Javascript
JavaScript利用正则表达式替换字符串中的内容
Dec 12 Javascript
Node.js安装配置图文教程
May 10 Javascript
详解mpvue scroll-view自动回弹bug解决方案
Oct 01 Javascript
Vue 解决通过this.$refs来获取DOM或者组件报错问题
Jul 28 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
php+iframe实现隐藏无刷新上传文件
2012/02/10 PHP
PHP压缩html网页代码(清除空格,换行符,制表符,注释标记)
2012/04/02 PHP
获取用户Ip地址通用方法与常见安全隐患(HTTP_X_FORWARDED_FOR)
2013/06/01 PHP
PHP中使用php://input处理相同name值的表单数据
2015/02/03 PHP
php排序算法实例分析
2016/10/17 PHP
浅析PHP中的闭包和匿名函数
2017/12/25 PHP
用prototype实现的简单小巧的多级联动菜单
2007/03/24 Javascript
toggle一个div显示或隐藏且可扩展成自定义下拉框
2013/09/12 Javascript
选择复选框按钮置灰否则按钮可用
2014/05/22 Javascript
jquery让返回的内容显示在特定div里(代码少而精悍)
2014/06/23 Javascript
使用JavaScript和CSS实现文本隔行换色的方法
2015/11/04 Javascript
表单验证正则表达式实例代码详解
2015/11/09 Javascript
JavaScript字符串常用的方法
2016/03/10 Javascript
Angular2 http jsonp的实例详解
2017/08/31 Javascript
JS实现点击下拉菜单把选择的内容同步到input输入框内的实例
2018/01/23 Javascript
解决eclipse中没有js代码提示的问题
2018/10/10 Javascript
JS添加或删除HTML dom元素的方法实例分析
2019/03/05 Javascript
浅谈vue中resetFields()使用注意事项
2020/08/12 Javascript
vue项目如何监听localStorage或sessionStorage的变化
2021/01/04 Vue.js
react-native 实现购物车滑动删除效果的示例代码
2021/01/15 Javascript
python各种语言间时间的转化实现代码
2016/03/23 Python
PHP实现发送和接收JSON请求
2018/06/07 Python
Python实现的连接mssql数据库操作示例
2018/08/17 Python
利用Django模版生成树状结构实例代码
2019/05/19 Python
Python3 列表,数组,矩阵的相互转换的方法示例
2019/08/05 Python
python数据预处理 :数据抽样解析
2020/02/24 Python
Python使用Matlab命令过程解析
2020/06/04 Python
使用python编写一个语音朗读闹钟功能的示例代码
2020/07/14 Python
CSS3实现多背景展示效果通过CSS3定位多张背景
2014/08/10 HTML / CSS
数字漫画:comiXology
2020/06/13 全球购物
一个SQL面试题
2014/08/21 面试题
公司联欢晚会主持词
2014/03/22 职场文书
食品采购员岗位职责
2014/04/14 职场文书
党员干部一句话承诺
2014/05/30 职场文书
文明家庭事迹材料
2014/12/20 职场文书
2019关于垃圾分类处理的调查报告
2019/12/26 职场文书