使用Ant Design UI库实现类似百度网盘

百度网盘就是文件层级明显

需求：

1、默认展示根目录下的文件及文件夹

2、实现上传功能，支持单个、多个文件的上传，大文件打包上传

3、实现点击目录可进入子目录，点击面包屑切换到对应目录层级

4、实现创建文件夹功能，重命名功能

5、实现文件下载，大文件打包下载

 这个博主牛👍

http://vmartaw.com/2020/04/22/使用Ant-Design-UI库实现类似百度网盘/

 仅供参考代码，react写法

1、新建文件夹、重命名

        

constructor(props) {
    super(props)
    this.state = {
      folder_name: '新建文件夹',
      editingKey: '', // 是否是重命名操作
    }
}


Button onClick={this.addFolder}><Icon type='folder-add' />新建文件夹</Button>


// 新建文件夹
addFolder = () => {
    // 参考图片2
}

columns = [ 参考图片1 ]


.......


import * as projectArchiveService from '../services/index.js';
namespace: 'projectArchiveModal',
state: {
    loading: false,
    backIdValue: '', // 父级标识，第一层级没有父级，标识为空，
    contentTableList: [], // 列表数据
    cataLogList: [], // 面包屑    
},

reducer: {
    setState (state, { payload }) {
        return { ...state, ...payload}
    },
},

thunk: {
    // 获取列表数据
    search ({ payload }, { put } ){
        put({
            type: 'projectArchiveModal/setState',
            payload: {
                loading: true,
            },
        });
        projectArchiveService.projecTableData(payload).then((res) => {
            if(res.code === 200){
                put({
                    type: 'projectArchiveModal/setState',
                    payload: {
                        loading: false,
                        backIdValue: res.data.backId,
                        contentTableList: res.data.content, // 列表数据
                        cataLogList: res.data.cataLog,
                    },
                })
            } else {
                message.error(res.data.message)
                put({
                    type: 'projectArchiveModal/setState',
                    payload: {
                        loading: true,
                    },
                });
            }
        }).catch((err) => {
            throw new Error(err)
        });
    }
},




......

// 获取列表数据
export function projecTableData (payload) {
    return request({
       url: '',
       method: 'post',
       data: {
            ...payload,
       },
    }};
}

// 新建文件夹，点击对勾调接口
export function savaAddNewFolder (payload) {
    return request({
       url: '',
       method: 'post',
       data: {
            ...payload,
       },
    }};
}

// 重命名
export function renameFile (payload) {
    return request({
       url: '',
       method: 'post',
       data: {
            ...payload,
       },
    }};
}

图片1：

图片3：由图片1中的代码产生的触发方法

图片2：

为了避免点击多次”新建文件夹”，新建页面显示许多，自定义一个id

react中一种传递调接口的方法

 拓展：

使用异步加载属性文件夹管理

使用Ant Design UI库实现异步加载树形结构文件夹管理 | WUWEI'S BLOG