vue+elementui实现文件/文件夹，拖拽文件/文件夹上传

1. 实现效果图

2. 参考文档：

【ElementUI如何上传文件夹】
【vue对文件夹进行拖拽上传完整流程（文件夹中超出100个文件）】
【vue 文件拖拽上传功能】

文字内容主要对大佬文章内容的整合，有不清楚的地方大家可以查看原文！！！。

3. 文件上传：主要使用了 input

     const input = document.createElement("input");
      input.type = "file";
      input.setAttribute("allowdirs", "true");
      input.setAttribute("directory", "true");
      input.style.cssText = "display:none";
      input.multiple = true;
      document.querySelector("body").appendChild(input);
      // todo 这里增加了input标签，可以给它删掉
      input.click();
      const _this = this;
      input.onchange = async function (e) {

        console.log(e.target["files"])
        // const formData = new FormData();
        // const file = e.target["files"];
        // for (let i = 0; i < file.length; i++) {
        //   formData.append("files", file[i], file[i].webkitRelativePath);
        // }
        // console.log(formData)
        // const { msg } = await _this.$http.post("file/upload", formData);
        // _this.$message.success(msg);
        document.querySelector("body").removeChild(input);
      }

4. 文件夹上传：文件夹上传给 input 添加 webkitdirectory

const input = document.createElement("input");
      input.type = "file";
      input.setAttribute("allowdirs", "true");
      input.setAttribute("directory", "true");
      input.style.cssText = "display:none";
      input.setAttribute("webkitdirectory", "true");
      input.multiple = true;
      document.querySelector("body").appendChild(input);
      // todo 这里增加了input标签，可以给它删掉
      input.click();
      const _this = this;
      input.onchange = async function (e) {
        console.log(e)
        console.log(e.target["files"])
        // const formData = new FormData();
        // const file = e.target["files"];
        // for (let i = 0; i < file.length; i++) {
        //   formData.append("files", file[i], file[i].webkitRelativePath);
        // }
        // console.log(formData)
        // const { msg } = await _this.$http.post("file/upload", formData);
        // _this.$message.success(msg);
        document.querySelector("body").removeChild(input);
      }

5. 文件/文件夹拖拽上传：主要使用 drop 和 dragover 事件，和文件读取

5.1 drop ：主要方法，获取拖拽到区域内的文件

<div
        class="filecount"
        @drop="dropFile($event)"
        @c="dragOverHandler($event)"
      >
        <div style="font-size: 67px;">
          <i class="el-icon-upload"></i>
        </div>
        <div>点击
          <el-link
            type="primary"
            style="font-size: 16px;margin-bottom: 7px;"
            @click="uploadone"
          >上传文件</el-link>
          /
          <el-link
            type="primary"
            style="font-size: 16px;margin-bottom: 7px;"
            @click="uploadmul"
          >文件夹</el-link>
          或直接拖拽上传
        </div>

5.2 script：dropFile 和 dragover 方法

dragOverHandler (event) {
      event.preventDefault();
  },
  dropFile (ev) {//拖拽文件上传
      ev.preventDefault();
      let file = null;
      if (ev.dataTransfer.items) {
        // Use DataTransferItemList interface to access the file(s)
        for (var i = 0; i < ev.dataTransfer.items.length; i++) {
          const fileItems = ev.dataTransfer.items[i].webkitGetAsEntry();
          this.fileTypeLoop(fileItems)
        }
      } else {
        // Use DataTransfer interface to access the file(s)
        for (var i = 0; i < ev.dataTransfer.files.length; i++) {
          console.log(
            "... file[" + i + "].name = " + ev.dataTransfer.files[i].name
          );
          file = ev.dataTransfer.files[i];
        }
      }

    },
    fileTypeLoop (fileItem) {
      let dirReader = null
      if (fileItem.isFile) {//文件
        fileItem.file((file) => {
          console.log(file)
        })
      } else if (fileItem.isDirectory) {//文件夹
        dirReader = fileItem.createReader()
        dirReader.readEntries(this.onReadEntries)
      }
    },
    onReadEntries (entries) {
      for (let i = 0; i < entries.length; i++) {
        // 判断是否是最后一个文件，是的话就让loopOver为true
        //if (i === entries.length - 1 && !entries[i].isDirectory && entries.length < 100) loopOver = true
        // 进行递归处理
        this.fileTypeLoop(entries[i])
      }
      // 如果entries.length则说明文件中可能不止100个文件，这个时候需要继续嵌套读取
      //if (entries.length) dirReader.readEntries(onReadEntries)
    },