問題描述

在最近的項目開發中遇到了這樣的一個問題，當我上傳了一個文件時，我將獲取到的文件名清空後，卻無法再次上傳相同的文件

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