dragger-upload

说明

拖拽上传插件

演示

源码

https://github.com/ddzy/ts-utility-plugins/tree/master/src/ddzy/business/upload/dragger-upload

配置

Name	Type	Description	Required
container	string	挂载到的 DOM 容器	false
onChangeHook	(e: Event) => void	文件发生改变时的钩子	false
onBeforeUploadHook	(file: File, fileList: File[]) => boolean | Promise	上传到服务器前执行的钩子	false
onUploadClickHook	(file: File, FileList: File[]) => boolean | Promise	上传至服务器按钮点击时的钩子	false
onPreviewClickHook	(file: File, fileList: File[]) => void	预览按钮点击时的钩子	false
onRemoveClickHook	(file: File, fileList: File[]) => void	从本地列表移除按钮点击时的钩子	false
onUploadClickSuccessHook	(file: File, fileList: File[]) => void	成功上传至服务器后的钩子	false
onUploadClickFailHook	(file: File, fileList: File[]) => void	上传至服务器失败时的钩子	false

总结

无法在ondrop内部直接使用e.dataTransfer.files获取文件列表

需要自定义数组, 再遍历一遍

ondrag和onclick无法共存, 导致无法追加自定义样式

只需监听 onmouseup, 并在其中自行调用label标签的click方法 - label.click()