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

歡迎交流討論。