在做上傳檔案的時候，大家會引入input標籤。但在實現的過程中，在上傳一個檔案後，第二次上傳同一個檔案時會無法觸發上傳的程式碼，問題其實這樣解決。

<input type="file" ref="referenceUpload" @change="onUpload" style="width: 78px;outline: none;height: 30px;z-index: 999;opacity: 0;"></Input>
<Button type="primary" style="margin: 0px 0px 0px -83px;">上傳檔案</Button>
 

 

//上傳PDF檔案
			onUpload(e) {				
				var formData = new FormData();
				formData.append('file', e.target.files[0]);
				formData.append('token', localStorage['token']);
				this.loadingst();
				this.axios.post('/report/upload', formData, {
					emulateJSON: true
				}).then(function(res) {					
					this.loadingsts();
					if(res.data.code == 200) {
						this.file_path = res.data.data.save_path;
						this.fromValue.report_name = res.data.data.name;
						this.file_name = res.data.data.name + '.pdf';
						this.file_size = res.data.data.size;
						this.file_size_name = ' | ' + res.data.data.size;
						this.$Notice.success({
							title: '提示',
							desc: '上傳成功 !',
							duration: 3
						})
						
					} else {
						this.$Notice.warning({
							title: res.data.msg,
							duration: 3
						});
					}
				}.bind(this))
				e.target.value = '';
			},
 

 

關鍵句

實現功能的關鍵在於最後一句：

e.target.value='';

因為觸發條件為change，當input裡儲存的檔案沒有變化的時候是不會進入函式的，所以在上傳的最後，把input中的value值清空就好了。

 

問題發生背景
使用input[type=file] 實現檔案上傳功能，通過onchange事件觸發js程式碼，這個時候第一次上傳是完全沒問題的，不過當你第二次上傳檔案時，如果是不同於上一次上傳檔案的話是可以正常上傳的，不過如果你選擇的還是上一個檔案，也就是兩次上傳的檔案重複了，那麼就會上傳失敗。

原因

input是通過onchange事件來觸發js程式碼的，由於兩次檔案是重複的，所以這個時候onchange事件是沒有觸發到的。

解決方案
方案一： 刪除input標籤的程式碼並重新新增dom節點，不過這個方案太笨拙，所以使用方案二。
方案二： 把input的value重新設定為空就好了，

document.getElementById('uploadFile').value = null;

this.$refs.referenceUpload.value = null;（vue