vue上傳圖片元件(支援拖拽資料夾上傳)
阿新 • • 發佈:2018-12-23
1.獲取拖拽上傳物件
drop(el) { el.stopPropagation(); el.preventDefault(); this.fileList(el.dataTransfer); }2.處理獲取到的檔案
fileList(fileList) { let files = fileList.files; for (let i = 0; i < files.length; i++) { //判斷是否為資料夾 if (files[i].type != '') { this.fileAdd(files[i]); } else { //資料夾處理3.分別出是否為資料夾this.folders(fileList.items[i]); } } },
這裡用到了webkitGetAsEntry(),谷歌跟火狐支援,ie不支援,
通過createReader().readEmtries轉換成file檔案
判斷isFile是否為檔案
//資料夾處理 folders(files) { let _this = this; //判斷是否為原生file if (files.kind) { files = files.webkitGetAsEntry(); } files.createReader().readEntries(function(file) { for (let i = 0; i < file.length; i++) { if (file[i].isFile) { _this.foldersAdd(file[i]); } else { _this.folders(file[i]); } } }) },