web资源读取上传 >>> 拖拽黏贴（文件、文件夹）等通通拿捏

最近项目多处需要资源读取上传，目前市面大多数工具是读取、上传混合一起，导致 UI 以及部分逻辑处理起来不太方便；所以自己实现了一下，具体做法是把资源读取、上传封装成两个工具，读取后的展示以及用户交互交给具体业务实现人，最后通过上传工具上传

介绍

• 资源读取
  • 内置常见的情况，尽量不耦合 HTML 标签，提供易于处理的数据格式，主要追求灵活
  • d-resouce 把资源读取封装成 npm 包，并整理支持了相关业务场景
• 资源上传
  • 负责控制并发、进度、取消、重试分片、对接后端接口协议等
  • npm 包正在进行中.....
• 🙃 啰嗦一下
  • 希望能对大家有帮助，高效完成任务，愉快摸鱼（本人能力有限，望大佬轻喷；欢迎提建议，提交 pr 完善代码更好哈哈哈）

读取需求

• 触发方式
  • 弹出系统资源框（input type="file" 选择）
  • 复制粘贴
  • 拖拽
• 读取目标
  • 具体文件
  • 文件夹
  • 文件、文件夹混合
• 数据形式
  • 平铺
    • 预览、展示部分信息
  • 树形
    • 文件夹展示其下所有文件总大小

d-resouce 简介

• 传入目标元素，内部会使元素支持拖拽、黏贴方式，支持文件、文件夹、以及混合读取
• 资源读取前、中、后会触发相应函数，方便业务灵活处理
  • 读取前beforeReadFuc
  • 读取中
    • 过滤，不会中断资源读取beforeReadFuc
      • 回调顺序，如下图
      • 
      • 
    • 检测，会中断资源读取validFuc
      • 回调顺序，只有文件会触发，如下图
      • 
      • 
  • 读取后readDataFuc
    • 数据会根据传入 mode 进行数据组建
      • 数组
      • 树形
• UI 效果处理
  • 拖拽文件移入、离开目标元素会触发相应回调函数dragoverFuc、dragleaveFuc
• 其他辅助函数
  • 文件 size 属性转为可读性良好的单位展示filterSize
  • 调用系统资源框供用户选择selectResource
  • selectResource 结果按照 mode 类型组装
    • 文件、多个文件selectFileChange
    • 文件夹selectFolderChange

demo 展示

• 数组情况
• 树形情况

源码地址

• d-resouce 项目

最后

如果对你开发某些功能有所帮助，麻烦多点赞评论收藏😊

如果对你实现某类业务有所启发，麻烦多点赞评论收藏😊

如果...，麻烦多点赞评论收藏😊

如果大家有其他的方案，欢迎留言交流哦！