vue项目中解决type=”file“ change事件只执行一次的问题
问题描述
在最近的项目开发中遇到了这样的一个问题,当我上传了一个文件时,我将获取到的文件名清空后,却无法再次上传相同的文件
<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事件只执行一次的问题的更多相关文章
- input type=”file“ change事件只执行一次的问题
js解决办法 HTML:<input id="file",type="file" onchange="upload()" /> ...
- 解决JS(Vue)input[type='file'] change事件无法上传相同文件的问题
Html <input id="file" type="file" accept=".map" onchange="uplo ...
- <input type="file"> change事件异常处理办法
问题:最近发现一个奇怪的bug, 那就是在上传图片需要采用input type=file来进行文件选择.由于为了适应美工的UI图,所以是把选择文件的input框隐藏了.然后通过另外一个按钮的点击事件来 ...
- vue项目中解决跨域问题axios和
项目如果是用脚手架搭建的(vue cli)项目配置文件里有个proxyTable proxyTable是vue-cli搭建webpack脚手架中的一个微型代理服务器,配置如下 配置和安装axios 安 ...
- type=file的change事件只能执行一次的解决方案
最近帮朋友做个项目中遇到了type=file change事件只能执行一次的问题,度娘了一下,发现提供了各种解决方案,所以决定记录一下我的思考方向和最终解决方式. 起初帮朋友做个项目,项目中遇到上传文 ...
- 谷歌游览器对<input type='file'> change只能响应1次解决和样式的改变
在项目过程中遇到的需要上传本地文件,file的原始控件不太美观,但是这个控件和button有点不太一样, 改变这个样式的思路就是在控件外面套一层链接,然后把file控件的透明度设置为0(透明).样式只 ...
- 项目中解决实际问题的代码片段-javascript方法,Vue方法(长期更新)
总结项目用到的一些处理方法,用来解决数据处理的一些实际问题,所有方法都可以放在一个公共工具方法里面,实现不限ES5,ES6还有些Vue处理的方法. 都是项目中来的,有代码跟图片展示,长期更新. 1.获 ...
- 在vue项目中使用canvas-nest.js,报parameter 1 is not of type 'Element'
canvas-nest.js是一款轻量的网页特效,如图: github地址:https://github.com/hustcc/canvas-nest.js 在普通的html项目中,只要将<sc ...
- 解决在Vue项目中时常因为代码缩进导致页面报错的问题
前言 如果我们初次使用vue-cli来构建单页SPA应用,在撸代码的过程中有可能会遇到这种因为代码缩进导致 页面报错的问题,导致我们烦不胜烦.接下来我们就来看一看如何解决这个小问题... erro原因 ...
随机推荐
- EventBus 最简易的使用方式
呃,要跟上时代的步伐,所以来学习一下EventBus(话说好像现在学也已经算是跟不上了..嘛..不管了,一步一步往前追,应该还来得及吧). 转载请注明出处:http://blog.csdn.net/w ...
- C语言实现ifconfig获取网卡接收和发送流量统计
在Windows下我们可以利用ipconfig命令获取网卡的相关信息,在Linux下命令是ifconfig 我们可以获取的信息更为丰富,其中包括网卡接收和发送的流量,用C语言实现这个命令并不是一件简单 ...
- 【Visual C++】游戏编程学习笔记之七:键盘输入消息
本系列文章由@二货梦想家张程 所写,转载请注明出处. 作者:ZeeCoder 微博链接:http://weibo.com/zc463717263 我的邮箱:michealfloyd@126.c ...
- TCP的核心系列 — ACK的处理(一)
TCP发送数据包后,会收到对端的ACK.通过处理ACK,TCP可以进行拥塞控制和流控制,所以 ACK的处理是TCP的一个重要内容.tcp_ack()用于处理接收到的ACK. 本文主要内容:TCP接收A ...
- C语言笔试经典-查找多位数重复数字以及次数
从键盘输入一个多位的整数 用程序判断 这个数里面有没有 重复的数字 有重复的数字就打印 哪个数字重复了 重复了几次 例如:输入:1122431 打印结果: 1重复 出现3次 2重复 出现2次, ...
- 【Qt编程】基于Qt的词典开发系列<十三>音频播放
在上一篇文章中,我是在Qt4平台上调用本地发音的,后来由于用到JSON解析,就将平台转到了Qt5,因为Qt5自带解析JSON的类.然后发现上一篇文章的方法无法运行,当然网上可以找到解决方法,我在这里直 ...
- rails将类常量重构到数据库对应的表中之二
在博文之一中我们将Order中的常量重构到了数据库的表中,也做了一些测试,貌似一切都很完美.可是...梦魔还未开始啊!我们少做了一步测试,就是rake test! 结果惨不忍睹,所有测试都是E,全部出 ...
- 恶补web之二:css知识(2)
css字体属性定义文本的字体系列,大小,加粗,风格和变形等. css中包含两种字体系列:通用字体系列和特定字体系列. font-family属性定义文本的字体系列: body {font-family ...
- 关于iOS9 HTTP不能正常使用的解决方法
在工程的info.plist文件中添加NSAPPTransportSecurity类型为Dictionary,在NSAPPTransportSecurity下添加NSAllowsArbitraryLo ...
- canvas元素
一.canvas元素的基础知识 canvas元素是html5中新增的一个重要的元素,专门用来绘制图形.在页面上放置了一个canvas元素,就相当于在页面上放置了一块"画布",可以在 ...