1. 程式人生 > >vue上傳圖片元件(支援拖拽資料夾上傳)

vue上傳圖片元件(支援拖拽資料夾上傳)


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 {
      //資料夾處理
this.folders(fileList.items[i]); } } },
3.分別出是否為資料夾

這裡用到了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]); } } }) },