文章目录

简介传输列表（难点）权限设置文件列表选择框和文件详情分享下载删除重命名复制移动 回收站文件分享列表分享列表分享详情分享接收页面私密分享具体分享内容

简介

结合百度网盘和阿里网盘创作使用，技术栈为：vue+vite+ts+antd。

主要功能有文件列表、文件上传、回收站、分享等等

传输列表（难点）

上传使用分片上传，具体功能有暂停上传，断点续传，取消上传，批量上传时实现异步上传

大致流程：

定义切片大小，异步时一次性可上传数量使用FileReader进行文件切片使用异步进行上传，方便后面进行异步控制，每上传一次切片内容就修改一次传输列表进度，全部上传成功后刷新列表（节流处理）

权限设置

新增公共文件区域，可单独设置权限

文件列表

文件列表分为列表模式和大图模式

选择框和文件详情

点击选择框选择后上方会出现可批量操作方式，选择一个内容是，右侧文件详情会显示文件信息，选择多个时重命名选项会去除

分享

分享分为两步：

设置公开链接和私密链接，同时可以设置链接过期时间

生成链接，如果是私密链接的话会生成提取码，这时仍可修改过期时间

下载

下载使用链接的形式去下载，这样的好处是可以使用浏览器自带的下载进度

删除

重命名

复制

点击复制图标弹出窗口，可在此选择文件路径，复制一份到该位置

移动

同复制，不同处在于会直接修改文件的所在路径，不会再生成一份

回收站

回收站有列表，还原，批量还原，清空，删除等功能；

还原，批量还原，清空，删除会有二次确认框，在回收站删除后会永久删除

文件分享列表

分享列表

显示已分享列表，有复制口令，取消分享，批量取消分享等功能；

分享详情

点击列表会出现对应的分享详情，可查看分享的具体详情，点击查看分享列表可跳转至对应接收分享的页面，

分享接收页面

私密分享

私密分享需要输入提取码，同时如果分享时间过期会停留在下图页面，只显示文件已过期

具体分享内容

功能有分享列表，转存，下载，批量下载，保存到我的云盘等功能

如果觉得《网盘（结合百度网盘/阿里网盘）》对你有帮助，请点赞、收藏，并留下你的观点哦！