vue中上傳檔案相同檔名沒反應

vue專案中會遇到上傳檔案的需求，jquery會有一些外掛程式很方便，如果不使用外掛程式網上的方法沒有太容易的而且很多是原生js或者基於jquery操作dom結構的。那麼在vue專案中如何實現呢，還有如何模擬表單檔案提交呢？

這裡檔案上傳檔案框的樣式美化就不過多贅述了，有很多例子。只介紹一下功能的實現以及注意的問題。

本地上傳

其中，multiple=」multiple」代表檔案可多選；

給檔案選擇器繫結change事件讓它在上傳檔案後去執行methods裡的函式，@change=」changefn($event)」；

changefn(e),()=>);
},

使用formdata()模擬表單提交檔案，迴圈e.target.files的檔案新增到formdata()中。

表單上傳請求頭資訊headers: ，

再使用axios配合傳送請求這樣上傳檔案功能就基本實現了。

但是其中遇到乙個問題就是change事件觸發條件是檔案上傳框內容改變才可以，每次上傳完檔案預設是不清空上一次上傳的內容的，這樣上傳同名檔案就不會觸發change事件。

網上現有的方法就是重置input上傳檔案的標籤的dom結構，在vue裡我的實現方法就是v-if去控制。

v-if=」clearshow」，初始化資料為true，在change事件觸發的函式裡設定clearshow為false，即移除了該input標籤，然後在**函式中再設定clearshow為true，這時的檔案上傳框就是清空的了。再上傳同名檔案也不會受影響了。