网盘(结合百度网盘/阿里网盘)

简介

结合百度网盘和阿里网盘创作使用,技术栈为:vue+vite+ts+antd。
主要功能有文件列表、文件上传、回收站、分享等等
页面

传输列表(难点)

上传使用分片上传,具体功能有暂停上传,断点续传,取消上传,批量上传时实现异步上传
大致流程:

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

权限设置

新增公共文件区域,可单独设置权限
在这里插入图片描述

文件列表

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

大图模式

选择框和文件详情

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

分享

分享分为两步:

  1. 设置公开链接和私密链接,同时可以设置链接过期时间
    分享第一步
  2. 生成链接,如果是私密链接的话会生成提取码,这时仍可修改过期时间
    生成链接

下载

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

删除

重命名

复制

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

移动

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

回收站

回收站有列表,还原,批量还原,清空,删除等功能;
还原,批量还原,清空,删除会有二次确认框,在回收站删除后会永久删除回收站

文件分享列表

分享列表

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

分享详情

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

分享接收页面

私密分享

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

具体分享内容

功能有分享列表,转存,下载,批量下载,保存到我的云盘等功能
具体分享内容

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值