批量文件夹上传实现，大量文件快速读取

前言

本次开发对象云存储（OSS）运用到了文件上传，文件夹上传和拖拽上传这三个功能。开发基于VUE,但是其他框架的需要应用到的都可以应用。然后由于操作流程不一样需要自己去完成一个拖拽上传组件，但是网上查询的其他同学写的代码，2w-3w文件读取需要40s-60s 甚至更长，原因是递归方式的写法上有问题,关键是什么时候读取结束也是不可掌控的。这样的话做读取的loading状态也不方便。所以自己用了一段时间去完善上传。最终效果是2w-3w读取效果在4-6s

1. 文件上传就是 input[file] 类型。

2. 文件夹上传是在input[file]类型的基础上添加了webkitdirectory属性。

3. 文件拖拽上传基于 webkitGetAsEntry + createReader原生API实现文件夹内列表的读取。

说明：优先考虑需求实现再去谈兼容，拖拽使用webkitGetAsEntry 和 createReader都有兼容性得，但是目前浏览器都在尽量的适配这些API，因为这也是前端开发常用的需求。

注意：createReader 这个API Opera目前任然不支持，webkitGetAsEntry 这个API各大版本均有支持。

实现的效果如下

一、什么场景使用拖拽上传？

1. 如果有10个文件夹，使用原生的input[file] + webkitdirectory 去上传文件夹只能一个一个的选择。此时拖拽就派上用场了。

2. 操作的易用性，我们都知道点击文件夹上传会发现文件夹下不展示文件列表，因为webkitdirectory 属性会过滤掉文件，只剩下文件夹，而拖拽会清晰的展示结构。如果使用input 上传会发现，上传文件就只能选择文件类型。上传文件夹就只能选择文件夹。拖拽上传不用管这些，拖什么就上传什么。

二、实现方式 - JS版本

1.HTML 部分-js

  上传文件
  上传文件夹

  
  

  

    
拖拽上传或者点击 上传文件
  

2. JS 部分

注意事项

注意点：需要注我用的是HTML文件实现的。如果您也应用的是HTML，直接打开上传会报错。需要以项目方式启动。这里推荐vscode使用 Go Live 插件去启动这个html。上面这个示例只是一个小demo，input 没有注册事件，可以自行完善。可以参考下面完全版本。

三、VUE 版本 - 完全版本，也是上面示例动图的版本

后记

1. 建议拖拽文件后，读取过程中触发loading 后，再次拖拽文件读取，此时注意loading状态。可以记录拖拽次数。比如拖拽第一为1。然后这个文件读取过程中，用户又拖拽了文件进来，此时+1。文件读取完成后就减一。最终这个读取次数为0时 loading 才为false。这个这个loading 读取状态时可掌控的。

2. 拖拽上传中文件有大有小，大的需要切片，小的直接上传，所以计算md5 也是比较重要的。因为md5如果后端有记录的话，说明文件已经上传过，直接标记成功，这就是所谓的秒传。

3. 断点续传也一样，就是计算的MD5传给后端后，后端返回md5的碎片列表hash，把没传的碎片传过去，传过的碎片标记为成功，然后合并碎片。因为我这边是云对象存储，业务上不追求md5实现断点续传妙传，只要求切片上传。所以我觉得是这一个不完美点。后面我会写个小作文去断点续传，秒传这一块逻辑

4. 上传接口如果一样的话浏览器允许同时链接个数为4-8个，这个是因为浏览器而异。也就是说如果同时调用20个上传接口的话，会有12个接口被浏览器挂起。所以控制上传接口个数也是一个计算活唷。我这边的实现是如果有切片和文件一起上传那么切片最大允许2个接口同时上传，文件允许4个同时上传。如果只有切片或者文件就只允许6个同时上传。