解决vue项目中type=”file“ change事件只执行一次的问题
2018-05-16 08:33
1901 查看
问题描述
在最近的项目开发中遇到了这样的一个问题,当我上传了一个文件时,我将获取到的文件名清空后,却无法再次上传相同的文件
<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事件只执行一次的问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
您可能感兴趣的文章:
相关文章推荐
- 解决JS(Vue)input[type='file'] change事件无法上传相同文件的问题
- 关于type=file;事件只执行一次的问题
- 关于ajaxFileUpload造成 input[type=file] change事件只能触发一次的问题
- input file域的value清空与赋默认值方法,及Jquery中file的change事件只能执行一次,不可多次执行的解决办法
- 解决 html input file onchang 事件触发一次后失效问题
- vue.js中v-on:textInput无法执行事件问题的解决过程
- 解决<input type=“file” multiple> 多文件上传问题(可以多次选取文件,也可以一次选取多个文件),而且点击的是一个同一个div
- easyui filebox 只触发一次 onChange 事件解决方法
- INPUT[type=file]的change事件不触发问题
- JQuery绑定input[type=file]的change事件问题
- C# 用file 上传文件大小时判断文件大小 file onchange 事件为什么只执行一次解决方案
- 解决Jquery对input file控件的onchange事件只生效一次的问题
- jquery file change 上传只触发一次问题的解决方法
- INPUT[type=file]的change事件不触发问题
- Android项目导入出现The type java.lang.Object cannot be resolved.问题解决办法!!
- 鼠标滚动一次window.onscroll事件的函数在firfox与Ie中执行的次数不同问题的处理s
- 【COCOS2DX-LUA 脚本开发之十三】解决lua项目编译Android出现get data from file failed、Cocos2dxActivity cannot be 路径等问题 .
- 解决jquery 修改onclick事件后IE兼容模式下立刻执行的问题
- 在VC空项目里添加自定义的预编译头(或关于:无法打开预编译头文件:“Debug/xxx.pch”: No such file or directory的问题的解决)
- 解决java web项目导入后出现的问题 ---cannot be read or is not a valid ZIP file