前言

首先说一下，小弟第一次写文章，如果有什么错误还望小哥哥小姐姐多多包涵。如果有什么缺陷还望大家指出来让小弟多学习。

内容划分

上传文件夹一共分两部分来写一方面怕太长了大家看五分钟就不想看了二是没有那么多时间写本文所以分为两次 这两篇文章我只写上传文件夹重要的知识点内容其他知识点就不细写了我相信掘金肯定会有更优秀的文章

上传文件夹的前期基础知识准备
完成上传文件夹的功能的思路和遇到的问题

组件功能(主要满足公司的业务功能文件夹里目前只带图片如果有其他的文件我会移除)

可以拖拽上传文件夹文件夹下面可以嵌套文件夹
可以点击上传多图片
可以一起拖文件夹和图片
也有一些上传成功失败进度等等的回调

组件背景

公司业务需求需要传很多图片而且有文件夹区分。所以要求做一个文件夹可以拖拽的组件。（因为人手不够加上公司定制化的东西多所以我现在主要负责公司前端的组件开发目前不写业务。这个也是我自己拦下的虽然有时候比较难但是能夯实很多基础知识）

怎么写

之前只做过图片上传，但是没有做过文件夹上传。一时间不知道从何下手。怎么办第一步就是看了一下某盘的上传操作。我试着拖动文件夹上传。整理了上传思路。

首先读取到文件夹的名称包括文件夹下面的文件夹组成树形结构
组成文件夹树形结构之后遍历上传文件夹
在服务器上创建同名文件夹
再把文件夹的图片上传到同名文件夹下

整体思路就是这样。看着是不是很简单呢。。。对我来说其实一点也不简单。我写了一周才写完。。。不碰到难点的东西都不知道自己弱。。

技术实现

首先基础拖拽drop等事件我就不说。掘金上面也有很多优秀的文章。我主要说一下文件夹名称的获取。因为很多人发现拖拽通过 event.dataTransfer.files 可以读取文件夹名字但是我们拿不到里面的文件啊！！！怎么办呢？我们知道 dataTransfer.files 返回的是File对象。列表里面的每项是每个读取到的文件。里面包括name、type、size等属性。那么文件夹里面的文件怎么办呢。其实可以通过dataTransfer.items。它返回的是一个DataTransferItemList对象，表示在拖动操作中拖动的项目的对象。但是只有这个还不够。我们需要它的一个方法 webkitGetAsEntry() 来返回文件。这个方法是非标准的。这时候就判断是文件夹还是文件通过 isDirectory 方法和 isFile 来判断，如果是文件夹目录。就需要递归得到该目录。第一步是创建一个FileSystemDirectoryReader来处理目录内容。通过createReder()方法来完成。之后 readEntries()调用读取目录中的所有文件。上面所有的内容我们都可以在MDN上找到而且MDN上面也给了说明和代码示例。（非常感谢MDN）。接下来我贴一段代码示例


 <div id="app">
  <div class="upload upload-box" id="upload">
   拖动文件夹到此处上传
  </div>
 </div>


const upload = document.getElementById('upload');

upload.addEventListener('dragover', uploadFunc, false);
upload.addEventListener('drop', uploadFunc, false);

function uploadFunc(event) {
  event.preventDefault();
  
  let files = [];
  if (event.type === 'drop') {
    let fileList = event.dataTransfer.files;
    let len = fileList.length;
   
    for (let i = 0; i < len; i++) {
      files[i] = fileList[i];
    }
   
    if (files.length) {
      let items = event.dataTransfer.items;
      if (items && items.length && items[0].webkitGetAsEntry != null) {
        addFilesItems(items);
      }
    }
  }
}

  function addFilesItems(items) {
    return function() {
      var ret = [];
      for (var i = 0; i < items.length; i++) {
        var item = items[i];
        var entry;

        if (item.webkitGetAsEntry && (entry = item.webkitGetAsEntry())) {
          if (entry.isFile) {
            // 把文件对象放到结果数组中  这里的addFile方法要单独写 我没有写上 这个不是重点
            ret.push(addFile(item.getAsFiles()));
          } else if (entry.isDirectory) {
            ret.push(addFilesFormDirectory(entry, entry.name));
          }
        }
      }
    }();
 } 

// 读取文件夹下的文件
function addFilesFormDirectory(directory, path) {
  const dirReader = directory.createReader();

  const readEntries = function readEntries() {
    return dirReader.readEntries(function(entries) {
      entries.forEach(function(entry){
        if (entry.isFile) {
          // 如果是文件
          entry.file(function(file){
            file.fullPath = path + '/' + file.name;
            // 那么暴露出去的就是 '文件夹/q.jpg' 这种形式 
            return addFile(file);
          });
          return addFile(file);
        } else if (entry.isDirectory) {
          // 递归处理
          addFilesFormDirectory(entry, path + '/' + entry.name);
        }
      });
    });
  };
  return readEntries();
}

通过readEntries会读取到下面的内容

上面就是拖拽上传文件夹需要准备的知识点。

最后

其实文件夹上传只是在服务器创建一个名字。用一个字段告诉我这是文件夹。难点在于怎么先创建好文件夹在把客户端这个文件夹下面的文件上传到创建好的文件夹下面。还有FileReader相关的知识点大家可以去高程书里面的25章节里面查看。里面写的很详细。再配合上饿了么上传组件的源码就更完美。我相信如果你仔仔细细阅读完它的源码并自己实现一个上传组件，我相信你能学到更多，反正我是看完它的源码写了一个上传组件。写完之后感觉真香。。。。

总结

这些知识点都是我查阅很多资料整理的，而且告诉大家一个秘密。有一个dropzonejs的库。我的项目就是基于它实现的。有很多完整的功能帮助我完成上传文件夹组件。因为有些功能我自己写会很费时间而且有的不一定会写所以我就直接使用它的API 阅读了它的源码。你也可以去看看官方文档最后谢谢dropzone

过几天我会更新下一篇实现上传文件夹的一些思路和遇到问题。下一篇也会把这个项目开源到我的github。