---
# System prepended metadata

title: 【自學筆記】input file同檔案重複上傳無效問題
tags: [html, front-end]

---

###### tags: `html`, `front-end`
# 【自學筆記】input file同檔案重複上傳無效問題

同上篇，這次的專案使用到`input file`處理上傳檔案的功能

然後我發現當我上傳一個檔案後，==再次上傳同一個檔案==，會完全不觸發
研究研究才發現，哦原來`input file`是使用`onchange`來觸發的


```htmlembedded=
<label class="upload-btn" @click="uploadCheck">
    <span>Upload</span>
    <input type="file" @change="upload"/>
</label>
```

---

也就是說因==觸發條件為change==，當`input`中儲存的文件沒有變化，是不會進到函示的。

那麼處理方式也就明瞭了

:::info
方案一、刪除input的dom節點，然後再重建
:::
應該可行，但總覺得有點蠢，所以我採用第二個方式

:::info
方案二、
:::
上傳處理完成後清空資訊，如下
```javascript=
upload: function (e) {
    let file = e.target.files[0]
    let reader = new FileReader()
    
    reader.addEventListener('load', function () {
        //do something...
    });
    
    reader.readAsText(file)
    e.target.value = '';
},
```

重點在於最後一句
```javascript=
e.target.value = '';
```
這樣做了之後，原先上傳的東西就被清掉了，下次重新上傳同一份檔案也可以順利執行了，不是多高深的問題，不過既然遇到了就筆記一下~

---

*新手工程師的筆記，純粹記錄學了些啥東西
如果有前輩高人讀了我的文，文中有任何錯誤再麻煩指教指教*