web 端资源（文件、文件夹）读取工具 此库若对你有所帮助，期待 Star 鼓励
简体中文 | English
内置常见的资源读取需求，方便更快地完成开发任务，愉快摸鱼
- 支持文件、多文件、文件夹读取
- 支持拖拽文件、文件夹读取
- 支持复制粘贴文件读取
- 支持返回两种数据格式（数组、树形）
- 支持只读文件模式
- 支持实时过滤文件、文件夹
- 支持实时检测文件规则校验，不符合可中断
- 默认每级文件夹会记录其下的所有文件大小总和
- 对外暴露拖拽 hover、leave 钩子，方便定制 UI 效果
- 安装
d-resouce依赖包
npm install d-resouce- 实例化
ResHandle工具
import { ResHandle } from "d-resouce";
const resHandle = new ResHandle(options);- 使用辅助工具函数
import { selectResource, selectFileChange, selectFolderChange, filterSize } from "d-resouce"| 字段 | 类型 | 说明 | 入参 |
|---|---|---|---|
| targetDom | HTMLElement | 拖拽事件对象 | ---- |
| dragoverFuc | Function | 拖拽事件对象 hover 事件 | 事件对象 |
| dragleaveFuc | Function | 拖拽事件对象 leave 事件 | 事件对象 |
| beforeReadFuc | Function | 拖拽、黏贴事件对象读取前钩子函数 | ---- |
| readDataFuc | Function | 拖拽、黏贴事件对象读取结果钩子函数 | 读取所有资源按照指定 mode 组装后的数据 |
| validFuc | Function | 读取到的所有资源都会作为参数传入此函数，返回 false 则终止读取操作 | 文件：size、fullPath、name、type、file |
| filterFuc | Function | 读取到的所有资源都会作为参数传入此函数，返回 false 则过滤掉此资源；注：过滤掉文件夹，其下的资源不在读取 | 分文件、文件夹两种，文件见 validFuc 入参，文件夹：totalSize、fullPath、name、type、file、child |
| mode | String | 值为 array 或者 tree | ---- |
| onlyFile | Boolean | 只读取文件，不处理文件夹 | ---- |
| targetDom | HTMLElement | 拖拽事件对象 | ---- |
| 字段 | 类型 | 说明 | 入参 | 出参 |
|---|---|---|---|---|
| selectResource | Function | 弹出系统资源框 | 1.是否目录上传 2.input type="file" 其他属性对象，例如：{ multiple: true } | 原生读取结果 |
| selectFolderChange | Function | 文件夹上传读取结果按照指定 mode 组装后的数据 | 1.文件上传读取结果 2.mode类型 | 处理后结果 |
| selectFileChange | Function | 文件上传读取结果处理（无层级，不需要指定 mode） | 1.文件上传读取结果 2.自定义格式化方法 | 处理后结果（默认按照readDataFuc 处理方式） |
| filterSize | Function | 文件 size 转换为具体单位（B、KB、MB、GB、TB） | 1.文件 size | 处理后带单位的字符串 |
wetChat: yl66915 qq 邮箱: [email protected]