vue中上傳文件相同文件名沒反應

vue項目中會遇到上傳文件的需求，jquery會有一些插件很方便，若是不使用插件網上的方法沒有太容易的並且不少是原生JS或者基於jQuery操做dom結構的。那麼在vue項目中如何實現呢，還有如何模擬表單文件提交呢？ 
這裏文件上傳文件框的樣式美化就不過多贅述了，有不少例子。只介紹一下功能的實現以及注意的問題。

<template>
  <div>
<span>
<a href="javascript:;" class="file_prev">本地上傳</a>
<input type="file" class="preFile" name="staffFile" multiple="multiple" @change="changeFn($event)" v-if="clearShow">
</span>
  </div>
</template>

　　

其中，multiple=」multiple」表明文件可多選；

給文件選擇器綁定change事件讓它在上傳文件後去執行methods裏的函數，@change=」changeFn($event)」 ；

changeFn(e){
        this.deviceArray = [];
        let deviceFile = e.target.files;
        let formData = new FormData();
        for(let i=0;i<deviceFile.length;i++){
          formData.append('file', deviceFile[i]);
        }
        this.clearShow = false;
        let config = {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }
        this.$axios.post(this.$API.processManage.processAddCheck,
          formData, config
        ).then((res)=>{
          console.log(res);
          this.clearShow = true;
        },()=>{
            this.clearShow = true;
        });
      },

　　

使用FormData()模擬表單提交文件，循環e.target.files的文件添加到FormData()中。

表單上傳請求頭信息headers: {‘Content-Type’: ‘multipart/form-data’}，

再使用axios配合發送請求這樣上傳文件功能就基本實現了。 
可是其中遇到一個問題就是change事件觸發條件是文件上傳框內容改變才能夠，每次上傳完文件默認是不清空上一次上傳的內容的，這樣上傳同名文件就不會觸發change事件。

網上現有的方法就是重置input上傳文件的標籤的dom結構，在vue裏個人實現方法就是v-if去控制。

v-if=」clearShow」，初始化數據爲true，在change事件觸發的函數裏設置clearShow爲false，即移除了該input標籤，而後在回調函數中再設置clearShow爲true，這時的文件上傳框就是清空的了。再上傳同名文件也不會受影響了。