business-upload

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

源码地址

在线演示

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: ondragonclick无法共存, 导致无法追加自定义样式

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