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，這時的檔案上傳框就是清空的了。再上傳同名檔案也不會受影響了。