问题描述

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

<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>