vue專案中解決type=”file“ change事件只執行一次的問題

七尚發表於2018-05-15
Vue事件

問題描述

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

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

相關文章