原生JS上傳文件夾，阻止瀏覽器默認彈窗（上傳文件夾的彈窗）

最近在工做中遇到一個上傳文檔的需求，用elementUI組件沒有上傳文件夾功能，只有上傳文檔功能，在開發過程當中遇到以下幾個問題，在此總結一下。

一、input框支持上傳文件夾，必需要在input標籤添加webkitdirectory屬性。（上傳文件夾功能不是全部瀏覽器都支持）

<input type="file" webkitdirectory />

二、項目需求：第一次點擊長傳文件夾長傳成功以後，第二次點擊給出提示框，只能長傳一次。在這裏我一開始的思路是input觸發的onchange事件，去onchange事件監聽阻止掉默認行爲，後來才發現點擊input框以後，給的上傳文件夾彈窗是在click事件的時候觸發的，因此想要阻止掉瀏覽器彈窗，就在input標籤上綁定一個click事件，在click事件中阻止瀏覽器默認行爲，彈窗就不會出現。如下代碼是以vue框架爲基礎寫的。

1）在input標籤綁定一個click事件

<input type="file" webkitdirectory @click="fileUploadCheck">

2）在methods裏面給這個方法作出相應的校驗，知足需求阻止瀏覽器默認行爲

fileUploadCheck(){
     // .....根據項目需求作校驗，知足條件阻止瀏覽器默認行爲
     if(e&&e.preventDefault) {
       e.preventDefault();
     }

   }

三、若是想要阻止elementUI的上傳文檔組件的彈窗，咱們還得經過JS獲取到input元素，給他添加一個click事件。在這裏我遇到一個問題是，經過原生JS給元素綁定事件，在if判斷裏不能移除這次事件，上傳文檔的彈窗被阻止以後，就一致被阻止掉。我想要條件容許時，給這個彈窗又能夠出現。最終我給他添加綁定事件的時候，下一句代碼就移除這個事件。

 fileUploadCheck(){
      let inputFile = document.getElementById('inputfile') //獲取到input框
      let hanle = function(event){  //阻止瀏覽器默認事件
        if(event.preventDefault && event){
          event.preventDefault()
        }
      }
      if(!this.flag){ //此變量是判斷是否已經上傳文件
        inputFile.addEventListener('click',hanle,false)  //知足條件給input綁定事件
        this.$message('文檔和文件夾只能上傳一次')
        setTimeout(function(){
          inputFile.removeEventListener('click',hanle,false)  //移除事件
        },500)
      }else {
        //若是將 inputFile.removeEventListener('click',hanle,false)寫在else,不能移除hanle事件
      }
    }