在做項目開發的時候，上傳東西無論文件也好，還是文件夾都需要用到
<input type="file" id="filepicker" name="fileList" multiple />
這次公司要做文件及文件夾上傳的需求，文件上傳之前使用的是ElementUi封裝好的組件一步到位如果感興趣可以去看下，等到文件夾上傳，則有些惆悵了。網上搜了很多資料但發現都不盡如意，甚至有的好坑！！！！！！！！一氣之下我自己寫了這個博客，雖然可能也有糟點，但盡我所能吧，雖然在網上沒搜到自己想要的，但也學到了不少；
input其實有不少屬性，對於上傳文件則需特別對待其中webkitdirectory這個屬性還是蠻重要的，是上傳文件夾的必備條件。我們在vue當中可以直接使用該標簽也可以封裝成組件，根據自己項目需求而定，但，使用該屬性有個糾結點，就是部分瀏覽器，不支持此屬性，這個需要注意了，由於樓主項目僅需支持chrome，firefox，edge，opera,故上網上搜了下兼容性，發現真爽，剛好符合，哈哈哈哈哈，親測有效
那么我們使用該標簽后接下來怎么辦？若說下次見，我是不是要被噴死
<a v-if="isShowChromeTip" href="javascript:;" class="input-file input-fileup" >
<i class="iconfont icon-beike"></i> 選擇文件夾<input ref="file" class="fileUploaderClass" type='file' name="file" webkitdirectory style="position: absolute;left: 50%;top: 20px;" @change.stop="changesData"/>
</a>
這個是在模板里面的代碼，我們在觸發事件后會需要調用一個函數，函數里面可以通過
changesData () {
console.log(this.$refs.file.files);
}
來獲取所上傳的文件，也就是說，在我們做文件上傳的時候是會得到所上傳的文件的，並且有個點我們需要注意下，就是得到的文件是個集合，瀏覽器會自動把文件夾里面無論是一級嵌套文件，還是多級嵌套文件都會遍歷出來，也就是說，在你選擇使用該屬性的時候，瀏覽器會直接獲取訪問該文件多有內容的權限，聽起來似乎有安全問題，但看要你應用什么場合了，接着我們拿到文件就可以為所欲為了，由於得到的文件是個集合，若有需要增加附屬其他屬性，最好對集合遍歷下（其實集合里面的每個元素就是你上傳的文件）在你上傳給后台的時候一定要注意！
文件你都拿到了，那么接下來就是你往后台傳送東西了由於一些東西不方便拿出來就不貼代碼了，其實有時候有些東西看起來很簡單，但做的時候確實，遇到一點東西就惡心一下。
---------------------
版權聲明：本文為CSDN博主「踩菜才材」的原創文章，遵循CC 4.0 by-sa版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/weixin_41313389/article/details/88016677
功能展示：
批量上傳文件
數據庫記錄
Mac控件安裝教程與演示說明：
Linux控件安裝教程與演示說明：
控件包下載：
MacOS：http://t.cn/Aijg65dZ
Linux：http://t.cn/Aijg6fRV
cab(x86)：http://t.cn/Ai9pmG8S
cab(x64)：http://t.cn/Ai9pm04B
示例下載：
php： http://t.cn/Ai9p3CKQ
在線教程：
php-文件管理器教程：http://t.cn/AiNhmilv
個人博客：http://t.cn/AiY7heL0