# 可拖拽上传文件组件upload-dragger

组件来源: 办公系统v3 - 通用组件

## 1.功能说明

可实现本地文件的拖拽上传，可拖入文件夹，实现文件夹中所有文件与文件夹的上传

## 2.组件依赖

- react

- antd

- 工具类gen-uuid

## 3.依赖结构体

```tsx
export interface DropFolder {
    name?: string  //文件名
    uid?: string   //唯一性id，由gen-uuid生成
    parentKey?: string //父文件夹的uid，根目录文件夹此项为空
}
```

## 4.组件接口

该案例用于拖拽上传后打印拖拽的文件与文件夹信息，如果想要将拖拽上传后的文件保存到远程服务器，则需要在onFileDrop中编写相应逻辑

```tsx
import UploadDragger from '@/common/upload-dragger';
export default function MainLayout() {
    return (
        <div className="main-layout-container">
            <UploadDragger className="task-list-container" 
              onFileDrop = {
                (fileList, folderList, fileCount, folderCount) => {
                    console.log(fileList);
                    console.log(folderList);
                    console.log(fileCount);
                    console.log(folderCount);
                    }}>
                <div style={{width:"400px", height:"300px", backgroundColor:"#FAC858"}}>上传至此处</div>
            </UploadDragger>
        </div>
    )
}
```