---

前言

1、以下代碼只實現的單個文件夾的上傳，原本需求是實現選擇多個文件夾上傳，但是沒找到實現的方法。如果想實現多個文件夾上傳，可以給這些文件夾新建一個父級文件夾，點擊上傳的時候選擇父級文件夾，就能遍歷該父級文件夾下的所有子集文件夾，這樣就能實現多個文件夾上傳了。
2、其他文章鏈接，文章內容并沒有去實踐，有興趣的伙伴可以看看。

---

element-ui寫法

html

<el-uploadclass="upload-demo"action="#":on-remove="fileRemove":on-change="fileChang"accept="":auto-upload="false":multiple="true":file-list="form.instFilePics"ref="uploadFile"
><el-button size="small" type="primary"><i class="el-icon-folder-opened"></i></el-button>
</el-upload>

---

JavaScrip

data() {return {form:{instFilePics:[],instFile:[]},}
},
mounted() {// 以下代碼有時候可能寫法不同，// 可在控制臺打印一層一層的找input，// 再加webkitdirectory屬性this.$refs.uploadFile.$children[0].$refs.input.webkitdirectory = true;
},
methods：{fileChang(file, fileList, name) {this.form.instFilePics = fileList;},fileRemove(file, fileList, name) {this.form.instFilePics = fileList},
}

---

解析

html
01、<el-upload>是一個Element UI的上傳組件，用于上傳文件。
02、class="upload-demo"為上傳組件添加一個CSS類，用于樣式定制。
03、action="#"指定上傳的服務器地址，這里設置為#，表示不進行實際的上傳操作。
04、:on-remove="fileRemove"監聽文件被移除的事件，當文件被移除時，調用fileRemove方法。
05、:on-change="fileChang"監聽文件變化的事件，當文件發生變化時，調用fileChang方法。
06、accept=""指定可以上傳的文件類型，這里為空，表示不限制文件類型。
07、:auto-upload="false"設置為false表示上傳操作不會自動進行，需要手動觸發。
08、:multiple="true"設置為true表示支持多文件上傳。
09、:file-list="form.instFilePics"綁定一個文件列表，這個列表將顯示在上傳組件中。
10、ref="uploadFile"為上傳組件設置一個引用，可以在Vue實例中通過this.$refs.uploadFile訪問到這個組件。

---

JavaScrip
1、data()定義組件的數據，其中form對象包含兩個數組，instFilePics用于存儲上傳的文件列表，instFile可能用于其他文件上傳的數組。
2、mounted()在組件掛載到DOM后執行，通過this.$refs.uploadFile.$children[0].$refs.input.webkitdirectory = true;設置文件輸入框支持選擇文件夾。
3、methods定義兩個方法，fileChang和fileRemove。
3.1、fileChang(file, fileList, name)當文件列表發生變化時，更新form.instFilePics為最新的文件列表。
3.2、fileRemove(file, fileList, name)當文件被移除時，更新form.instFilePics為最新的文件列表。

---

總結
代碼段實現一個文件上傳組件，用戶可以選擇文件或文件夾進行上傳，上傳的文件列表會顯示在界面上。通過fileChang和fileRemove方法，可以處理文件列表的變化和文件的移除操作。

---

input寫法

html

<div class="select-files-btn"><el-button type="primary" @click="choiceFiles"><i class="el-icon-folder-opened"></i></el-button><input ref="filElem" type="file" multiple class="upload-file" webkitdirectory @change="getFile"/>
</div>

---

JavaScrip

methods: {choiceFiles(){// 以下代碼有時候寫法不同，// 可在控制臺打印一層一層的找inputthis.$refs.filElem.click();},getFile(e){let files = e.target.files;  console.log(files);}
}

---

解析

html
1、<div class="select-files-btn">是一個包含按鈕和文件輸入框的容器。
2、<el-button type="primary" @click="choiceFiles">是一個Element UI的按鈕組件，類型為primary，表示按鈕是主要操作按鈕。@click="choiceFiles"是一個事件監聽器，當按鈕被點擊時，會調用Vue實例中的choiceFiles方法。
3、<i class="el-icon-folder-opened"></i>是一個圖標，使用Element UI的圖標類，顯示一個打開的文件夾圖標。
4、<input ref="filElem" type="file" multiple class="upload-file" webkitdirectory @change="getFile"/>是一個文件輸入框，允許用戶選擇多個文件(multiple屬性)。ref="filElem"是一個Vue的引用，允許在Vue實例中直接訪問這個DOM元素。webkitdirectory屬性允許用戶選擇文件夾，而不是單個文件。@change="getFile"是一個事件監聽器，當文件選擇框的值發生變化時，會調用Vue實例中的getFile方法。

---

JavaScrip
1、choiceFiles()方法會在用戶點擊按鈕時被調用。它通過this.$refs.filElem.click()模擬點擊文件輸入框，允許用戶選擇文件而不直接點擊輸入框。
2、getFile(e)方法會在文件輸入框的值發生變化時被調用(即用戶選擇了文件后)。e.target.files包含用戶選擇的所有文件，然后這些文件會被打印到控制臺。

---

總結
代碼段提供一個用戶界面，允許用戶通過點擊一個按鈕來選擇文件或文件夾，并在選擇后將文件信息打印到控制臺。這通常用于文件上傳功能。