vue项目中type=”file“change事件只执行一次怎样处理

问题描述

在最近的项目开发中遇到了这样的一个问题，当我上传了一个文件时，我将获取到的文件名清空后，却无法再次上传相同的文件

<template>
 <p class="hello">
 <input type="button" value="上传文件" name="" id="" @click="updata">
 <input type="file" style="display:none" @change="getFile" id="input-file">
 <p v-if="fileName">
 <p>上传的文件名：{{fileName}}</p>
 <button @click="delFile">清空文件</button>
 </p>
 </p>
</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>
 <p class="hello">
 <input type="button" value="上传文件" name="" id="" @click="updata">
 <input v-if="ishowFile" type="file" style="display:none" @change="getFile" id="input-file">
 <p v-if="fileName">
 <p>上传的文件名：{{fileName}}</p>
 <button @click="delFile">清空文件</button>
 </p>
 </p>
</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>

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

推荐阅读：

怎样操作Vue做出高德地图搭建实时公交应用

怎样使用基于Vue2x实现响应式自适应轮播组件插件VueSliderShow功能_vue.js