解决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 String对象扩展HTML编码和解码的方法
Jun 02 Javascript
javascript中定义私有方法说明(private method)
Jan 27 Javascript
用jquery等比例控制图片宽高的具体实现
Jan 28 Javascript
js中对函数设置默认参数值的3种方法
Oct 23 Javascript
JavaScript检测原始值、引用值、属性
Jun 20 Javascript
解决微信浏览器Javascript无法使用window.location.reload()刷新页面
Jun 21 Javascript
全面解析Angular中$Apply()及$Digest()的区别
Aug 04 Javascript
浅谈JS继承_寄生式继承 &amp; 寄生组合式继承
Aug 16 Javascript
IONIC自定义subheader的最佳解决方案
Sep 22 Javascript
vue获取DOM元素并设置属性的两种实现方法
Sep 30 Javascript
node上的redis调用优化示例详解
Oct 30 Javascript
vue+webpack dev本地调试全局样式引用失效的解决方案
Nov 12 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控制linux服务器常用功能 关机 重启 开新站点等
2012/09/05 PHP
基于php权限分配的实现代码
2013/04/28 PHP
php 目录遍历、删除 函数的使用介绍
2013/04/28 PHP
ThinkPHP自定义函数解决模板标签加减运算的方法
2015/07/03 PHP
php中switch语句用法详解
2015/08/17 PHP
Yii2.0高级框架数据库增删改查的一些操作
2015/11/16 PHP
PHP实现求两个字符串最长公共子串的方法示例
2017/11/17 PHP
微信公众号开发之获取位置信息php代码
2018/06/13 PHP
php框架CI(codeigniter)自动加载与自主创建对象操作实例分析
2020/06/06 PHP
Js 订制自己的AlertBox(信息提示框)
2009/01/09 Javascript
中文字符串截取的js函数代码
2013/04/17 Javascript
jquery用get实现ajax在ie里面刷新不进入后台解决方法
2013/08/12 Javascript
JQ获取动态加载的图片大小的正确方法分享
2013/11/08 Javascript
利用js判断浏览器类型(是否为IE,Firefox,Opera浏览器)
2013/11/22 Javascript
jQuery中scrollTop()方法用法实例
2015/01/16 Javascript
js实现选中复选框文字变色的方法
2015/08/14 Javascript
jquery中object对象循环遍历的方法
2015/12/18 Javascript
jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)
2016/02/25 Javascript
Bootstrap的popover(弹出框)2秒后定时消失的实现代码
2017/02/27 Javascript
javascript实现滑动解锁功能
2017/03/22 Javascript
Node.js API详解之 V8模块用法实例分析
2020/06/05 Javascript
零基础写python爬虫之爬虫编写全记录
2014/11/06 Python
Python多进程并发(multiprocessing)用法实例详解
2015/06/02 Python
详解python中asyncio模块
2018/03/03 Python
python 简单照相机调用系统摄像头实现方法 pygame
2018/08/03 Python
使用Django简单编写一个XSS平台的方法步骤
2019/03/25 Python
简单了解Python生成器是什么
2019/07/02 Python
python 初始化一个定长的数组实例
2019/12/02 Python
css3 矩阵的使用详解
2018/03/20 HTML / CSS
HTML5 创建canvas元素示例代码
2014/06/04 HTML / CSS
大专毕业自我鉴定
2014/02/04 职场文书
运动会主持词大全
2015/07/02 职场文书
食堂管理制度范本
2015/08/04 职场文书
解决Pytorch半精度浮点型网络训练的问题
2021/05/24 Python
Echarts如何重新渲染实例详解
2022/05/30 Javascript
使用opencv-python如何打开USB或者笔记本前置摄像头
2022/06/21 Python