business-upload

拖拽上传插件, 完全自定义且可配置化, 提供多个接口(预览、上传)和完整的生命周期钩子...

源码地址
ddzy/ts-utility-plugins
:octocat: Useful plugins library,  including Canvas、Business、Utility and more - ddzy/ts-utility-plugins
github.com
在线演示
​https://codesandbox.io/s/businessupload-4z24x​
基本用法
new Upload.Dragger({});
可配置项
Key
Value
Require
Description
container
string
false
挂载到的容器
onChangeHook
(e: Event) => void
false
文件改变时触发
onBeforeUploadHook
(file: File, fileList: File[]) => boolean | Promise
false
文件上传至本地列表前触发, 在此处进行预处理(文件大小判断), 返回true或者Promise为resolve时添加到本地列表, 反之不添加
onUploadClickHook
(file: File, FileList: File[]) => boolean | Promise
false
点击上传按钮时触发, 在此处进行自定义文件上传操作, 此时会上传至服务器, 返回true或者Promise为resolve时触发onUploadClickSuccessHook钩子, 反之触发onUploadClickFailHook
onUploadClickSuccessHook
(file: File, fileList: File[]) => void
false
成功上传至服务器时触发
onUploadClickFailHook
(file: File, fileList: File[]) => void
false
上传至服务器发生错误时触发
onPreviewClickHook
(file: File, fileList: File[]) => void
false
自定义图片预览
onRemoveClickHook
(file: File, fileList: File[]) => void
false
将图片从本地列表移除时触发
问题记录
Q: 无法在ondrop事件内部直接使用e.dataTransfer.files获取文件列表
A: 需要自定义数组, 遍历一遍
Q: ondrag和onclick无法共存, 导致无法追加自定义样式
A: 只需监听onmouseup, 并在其中自行调用label标签的click方法 - label.click()

Business - Previous

business-draggable

Next - Canvas

CANVAS-README

Last updated 8 months ago

Key	Value	Require	Description
container	string	false	挂载到的容器
onChangeHook	(e: Event) => void	false	文件改变时触发
onBeforeUploadHook	(file: File, fileList: File[]) => boolean \| Promise	false	文件上传至本地列表前触发, 在此处进行预处理(`文件大小判断`), 返回`true`或者Promise为`resolve`时添加到本地列表, 反之不添加
onUploadClickHook	(file: File, FileList: File[]) => boolean \| Promise	false	点击上传按钮时触发, 在此处进行自定义文件上传操作, 此时会上传至服务器, 返回`true`或者Promise为`resolve`时触发`onUploadClickSuccessHook`钩子, 反之触发`onUploadClickFailHook`
onUploadClickSuccessHook	(file: File, fileList: File[]) => void	false	成功上传至服务器时触发
onUploadClickFailHook	(file: File, fileList: File[]) => void	false	上传至服务器发生错误时触发
onPreviewClickHook	(file: File, fileList: File[]) => void	false	自定义图片预览
onRemoveClickHook	(file: File, fileList: File[]) => void	false	将图片从本地列表移除时触发