壹道文件柜上线:拖放上传、断点续传、二维码下载

島主发布于 2026-8-17 00:10 阅读：39 建站运维

2026-08-17 · 建站运维

昨晚(8/16)1dao.cc 家族又添新成员:文件柜 files.1dao.cc。从最初一个简单的上传页,一路迭代到带分片断点续传、二维码下载、图片预览的内部文件管理平台。这篇记录整个演进过程和几个关键设计。

一、为什么做文件柜

1dao.cc 的站点越来越多:主站、博客、禅道、发布平台、导航……日常总有文件要传:备份包、安装包、图片素材、临时文档。之前靠 scp 或聊天工具传来传去,既不统一也不安全。需要一个内部的文件中转站——能传、能管、能分享。

二、演进过程(四版迭代)

v1:基础版(上传/下载/删除)

第一版 20 分钟就上线了:一个 PHP 页面,支持多文件上传、列表、下载、删除。但很快发现问题——PHP 默认只允许传 2MB,nginx 写了 500M 也没用。改配置:upload_max_filesize 提到 500M。另外把可执行文件(.php/.sh/.py)全部拦掉,防止有人传个 webshell 上来。

v2:目录 + 分片断点续传

文件一多就要分目录。加了目录创建/浏览/删除。上传也重写了:分片上传,每片 4MB,逐片 POST,传完合并。这样:

500MB 大文件也能传(不依赖 PHP 内存)
断点续传:传一半断了,重新选择文件,自动跳过已传分片接着传
手动中断/续传/移除,每个文件独立进度条

v3:树状目录(做了又砍了)

按惯例给左侧加了目录树,懒加载、可展开收起。但实际用下来体验一般:层级深了展开收起时灵时不灵,而且树+列表双导航对文件管理其实没必要。最终砍掉树,回到面包屑+列表——这也是网盘类产品的标准形态。有些功能做了又删不是白费,至少确认了哪种交互更合适。

v4:拖放上传 + 二维码 + 预览 + hover 详情(当前版)

拖放上传:文件拖进窗口任意位置,出现"松开即可上传"提示,松手自动开始传
二维码下载:每个文件生成二维码,手机扫码直接打开下载链接
图片预览:图片文件一键预览大图,双击也触发
hover 详情:鼠标悬停显示文件完整信息(类型/MIME/大小/修改时间/完整路径/下载链接)
文件类型图标(🖼️🎬📦📕💻 按扩展名映射)、表头排序、复制路径/链接

三、几个关键设计

安全

内部工具也得防一手:

nginx basic auth,未认证 401
可执行扩展名拦截(前端 + 服务端双重校验)
数据目录放 web 根外(/var/www/files-data),URL 无法直接访问
路径越界防护:目录参数规范化,禁止 .. 逃逸

分片断点续传

核心是服务端 upload_chunk / chunks / merge 三个接口:

1. 选择文件 → 生成 fileId(名称+大小+修改时间 hash)
2. 查询已传分片(断点检测)
3. 逐片上传到 .tmp/<fileId>/chunk_N
4. 全部传完 → merge 合并到目标目录,清理临时分片

与发布平台打通

代码推到 Gitee 私有仓(ccoad1-files),接入懒人发布平台(walle):检出 → releases/files/版本 → 软链切换。数据目录独立于 release,部署不影响已上传文件。以后改代码:push → 提交上线单 → 完成。

四、踩坑记录

坑	原因	解法
上传永远失败/超小	PHP upload_max_filesize 默认 2M	提到 500M(post_max_size 同步)
断点续传检测不到	fileId 不稳定	用名称+大小+修改时间做 hash
树展开时灵时不灵	懒加载缓存递归问题	缓存命中改异步回调;未加载目录也显示展开箭头
图片预览空白	下载接口强制 attachment	图片支持 inline 输出(view=1)