附件拖拽上传
灵感：能力工具箱 dropzone-up（Dropzone 拖拽上传名片/执照附件）。
> 小四原创：容器 → new Dropzone → success/error 回调。
> 卸载 destroy()；限制图片/PDF 类型与大小。
何时使用
- 客户详情上传名片、执照
- Demo 本地附件投放区
- 跟进记录附图
硬约束
- 依赖：
dropzone（及官方 CSS）。 - 明确
acceptedFiles与maxFilesize。 - 组件卸载必须
destroy()。 - 实现要点注释标 小四原创。
- 不做完整对象存储控制台；上传 URL 由业务提供。
推荐实现
import Dropzone from 'dropzone'
import 'dropzone/dist/dropzone.css'
Dropzone.autoDiscover = false
// 小四原创：附件拖拽区
export function mountAttachDropzone(
el: HTMLElement,
opts: {
url: string
acceptedFiles?: string
maxFilesizeMb?: number
onSuccess?: (file: Dropzone.DropzoneFile, res: unknown) => void
onError?: (file: Dropzone.DropzoneFile, msg: string | Error) => void
},
): { destroy: () => void } {
const dz = new Dropzone(el, {
url: opts.url,
acceptedFiles: opts.acceptedFiles ?? 'image/*,.pdf',
maxFilesize: opts.maxFilesizeMb ?? 8,
addRemoveLinks: true,
dictDefaultMessage: '拖拽名片/执照到此处，或点击选择',
})
if (opts.onSuccess) dz.on('success', opts.onSuccess)
if (opts.onError) dz.on('error', opts.onError)
return { destroy: () => dz.destroy() }
}
Agent 步骤
npm i dropzone；引入 CSS；autoDiscover = false。- 客户附件区挂载；接业务上传接口。
onBeforeUnmount调destroy。- 自测：拖入图片有队列；超类型被拒。
不要做
- 忘记关 autoDiscover 导致重复初始化。
- 无大小限制接收任意文件。
附加
- README.md · reference.md · templates/usage.md
