👁️ 预览功能说明
本网盘提供三种预览方式,适用于不同场景和文件类型。引入新预览 API 的原因是:原始预览可能会出现乱码问题,因此新增了经过优化的预览方式。
🟢 新预览(新API)
- 通过 api.php 中转预览
- 解决了原始预览的乱码问题
- 遇到无法预览的格式,直接触发下载
- 支持更多文件类型
- 提供更好的兼容性
- 按钮标识:👁️ 预览文件(新API)
- 推荐使用,稳定性更高
🟡 原始预览
- 直接访问文件原始链接
- 由浏览器决定如何打开
- txt、图片等可直接显示
- 可能会出现乱码问题
- 按钮标识:👁️ 原始预览
- 适合简单文本和图片文件
🔵 在线预览(jPreview)
- 使用 jPreview 插件预览
- 支持 Office、PDF、多媒体等
- 提供统一的预览体验
- 按钮标识:📖 在线预览
- 适合文档类文件预览
预览方式选择指南
- 文档类(doc, docx, ppt, pptx, xls, xlsx):推荐使用「📖 在线预览」,支持完整的 Office 文档预览
- PDF 文件:推荐使用「📖 在线预览」或「👁️ 原始预览」,根据浏览器支持情况选择
- 图片文件:推荐使用「👁️ 原始预览」,直接在浏览器中显示
- 音视频文件:推荐使用「📖 在线预览」,提供统一的播放器体验
- 文本文件(txt, json, xml 等):推荐使用「✏️ 编辑文件」或「👁️ 新预览」,避免乱码问题
- 压缩文件(zip, rar 等):使用「⬇️ 下载文件」,无法预览,直接下载
- 未知格式或特殊文件:使用「👁️ 新预览」,无法预览时会自动触发下载
预览方式对比表
| 预览方式 |
优点 |
缺点 |
适用场景 |
| 🟢 新预览(新API) |
解决乱码问题、兼容性好、无法预览自动下载 |
需要 API 中转 |
推荐用于所有文件,尤其是文本文件 |
| 🟡 原始预览 |
直接访问、速度快 |
可能出现乱码、格式支持有限 |
简单文本、图片文件 |
| 🔵 在线预览(jPreview) |
支持多种格式、统一体验 |
依赖插件、加载稍慢 |
Office 文档、PDF、多媒体 |
为什么引入新预览 API?
原始预览方式存在以下问题:
- 乱码问题:部分编码格式的文本文件在浏览器中直接预览会出现乱码
- 兼容性差:某些文件格式浏览器无法直接处理
- 用户体验不佳:遇到无法预览的文件没有明确的反馈
新预览 API 的改进:
- 解决乱码:通过 API 中转,正确处理文件编码
- 自动下载:遇到无法预览的格式,直接触发下载
- 更好的兼容性:支持更多文件类型
💡 使用技巧
文件操作技巧
- 点击文件名或图标可打开文件详情弹窗
- 鼠标悬停在文件上会显示操作按钮
- 支持复选框批量选择文件
🔄 文件覆盖更新
- 功能说明:上传文件时,如果目标位置已存在同名文件,系统会弹出冲突处理对话框
- 冲突处理策略:
- 更新(覆盖):用新文件替换旧文件,旧文件内容将丢失
- 跳过:保留原文件,跳过本次上传
- 重命名:为新文件自动添加序号后缀(如 file(1).txt)
- 触发场景:
- 拖拽上传时文件名冲突
- 点击上传按钮上传同名文件
- 批量上传时部分文件冲突
📁 新建文件夹和文件
- 新建文件夹:
- 点击工具栏的「📁 新建文件夹」按钮
- 在弹出的对话框中输入文件夹名称
- 点击「创建」按钮完成创建
- 新建文件:
- 点击工具栏的「📄 新建文件」按钮
- 在弹出的对话框中输入文件名
- 从下拉框选择常见后缀(.html, .txt, .css, .js, .json, .xml, .php, .md, .py)
- 如果需要的格式不在列表中,可选择「其他」后手动输入后缀
- 也可以直接在文件名中输入带后缀的名称(如 index.html)
- 点击「创建」按钮完成创建
- 创建成功后可选择立即编辑或稍后编辑
- 注意事项:
- 文件夹/文件名称不能为空
- 同一目录下不能有同名文件夹/文件
- 支持中文文件名
📁 批量操作功能
- 批量选择:勾选文件前的复选框,可同时选择多个文件
- 批量删除:选择多个文件后,点击删除按钮一次性删除
- 合并为压缩包:选择多个文件后,点击「合并为压缩包」按钮,将选中文件打包下载
- 操作提示:顶部会显示已选择的文件数量
链接类型说明
- 下载链接:强制触发文件下载,URL 包含 api.php?action=download
- 原始链接:直接访问文件,由浏览器决定处理方式
快捷键
- 刷新页面:F5
- 打开新标签页:Ctrl+T
- 关闭当前标签页:Ctrl+W
📝 日志系统说明
📊 日志系统概述
本网盘系统配备完整的日志记录系统,用于追踪所有文件操作,便于系统维护和问题排查。
📁 日志文件类型
- upload_log.txt:记录所有文件上传操作,包括普通上传和分块上传
- operation_log.txt:记录除上传外的其他操作,如删除、重命名、新建等
📋 日志记录内容
| 操作类型 |
说明 |
记录的信息 |
| upload_file |
文件上传 |
时间戳、文件名、文件大小、上传类型、服务器OS、PHP版本 |
| chunk_upload |
分块上传 |
时间戳、分块索引、总分块数、文件ID、文件大小 |
| create_file |
新建文件 |
时间戳、文件路径、创建结果 |
| create_folder |
新建文件夹 |
时间戳、文件夹路径、创建结果 |
| delete_file |
删除文件 |
时间戳、文件路径、删除结果、文件大小 |
| delete_folder |
删除文件夹 |
时间戳、文件夹路径、删除结果 |
| rename_file |
重命名文件/文件夹 |
时间戳、原路径、新路径、重命名结果 |
| save_file |
保存文件 |
时间戳、文件路径、保存结果、文件大小 |
🧹 日志自动清理机制
- 自动清理:每次写入日志时自动触发清理操作
- 保留天数:默认保留最近 30 天的日志
- 清理范围:同时清理 upload_log.txt 和 operation_log.txt
- 清理逻辑:根据日志中的 timestamp 字段判断是否超过保留期限
🔍 日志格式说明
所有日志均采用 JSON 格式存储,便于解析和查询:
{
"timestamp": "2026-05-20 14:45:43",
"operation": "create_file",
"path": "documents/readme.txt",
"server_os": "Linux/Unix",
"php_version": "8.1.32",
"remote_ip": "192.168.1.100",
"user_agent": "Mozilla/5.0...",
"success": true,
"message": "文件创建成功",
"file_size": 0
}
⚠️ 日志安全说明
- 日志文件包含客户端IP地址和浏览器信息
- 建议定期检查日志文件权限,确保只有管理员可访问
- 日志文件存储在网站根目录下,文件名以 .txt 结尾
🔧 核心逻辑说明
📁 文件路径处理逻辑
- 路径编码:所有文件路径使用 URL 编码处理,支持中文路径
- 路径格式:使用相对路径,基于 wp 目录
- 路径获取:通过 URL 参数传递,使用 urldecode 解码
- 安全处理:防止路径遍历攻击,限制在允许的目录范围内
🔌 API 调用流程
- 请求方式:GET 或 POST,根据操作类型决定
- 参数传递:通过 URL 参数或表单数据传递
- 响应格式:统一 JSON 格式,包含 success、message、data 字段
- 错误处理:统一的错误消息返回,便于前端处理
🔗 链接生成逻辑
- generateDirectLink:生成下载链接(强制下载)
- generateRawLink:生成原始链接(直接访问)
- basePath 计算:基于当前页面 URL 动态计算基础路径
- 特殊字符处理:路径中的特殊字符单独编码
👁️ 预览流程
- 用户点击预览按钮
- 前端根据预览类型生成对应的链接
- 打开预览页面(preview.html 或直接访问)
- 预览页面加载文件并显示
- 新预览 API:无法预览时自动触发下载
✏️ 编辑流程
本网盘提供两个版本的编辑器,用户可以根据需求选择:
编辑器对比
| 特性 |
✨ 新版编辑器 (wz.html) |
🚀 升级版编辑器 (wz1.php) |
📄 旧版编辑器 (wz.php) |
| 语法高亮 |
✅ 支持多种语言 |
❌ 不支持 |
❌ 不支持 |
| 行号显示 |
✅ 支持 |
✅ 支持 |
❌ 不支持 |
| 撤销/重做 |
✅ 支持 (Ctrl+Z/Ctrl+Y) |
❌ 不支持 |
❌ 不支持 |
| 代码注释 |
✅ 支持 (Ctrl+/) |
❌ 不支持 |
❌ 不支持 |
| 暗色模式 |
✅ 支持 |
❌ 不支持 |
❌ 不支持 |
| 全屏模式 |
✅ 支持 (F11) |
❌ 不支持 |
❌ 不支持 |
| 字数统计 |
✅ 支持 |
✅ 支持 |
✅ 支持 |
| 现代化UI |
✅ 现代设计 |
✅ 玻璃拟态设计 |
❌ 简洁设计 |
| 动态效果 |
✅ 有限 |
✅ 丰富(粒子背景) |
❌ 无 |
| 保存方式 |
API 保存 / 本地下载 |
API 保存 |
API 保存 |
| 编辑器联动 |
✅ 切换到 wz1.php |
✅ 切换到 wz.html/wz1.html/wz.php |
✅ 切换到 wz.html |
| 适用场景 |
代码编辑、专业开发 |
日常编辑、美观界面 |
快速文本编辑 |
编辑操作流程
- 用户在文件列表或详情弹窗中点击编辑按钮
- 选择编辑器版本:
- ✨ 新版编辑器:打开 wz.html?path=文件路径(高级功能)
- 🚀 升级版编辑器:打开 wz1.php?path=文件路径(现代化UI)
- 📄 旧版编辑器:打开 wz.php?path=文件路径(简洁快速)
- 编辑器调用 api.php?action=edit_file 读取文件内容
- 用户编辑内容(新版支持语法高亮等高级功能)
- 点击保存时调用 api.php?action=save_file 保存内容
- 返回保存结果并更新界面
- 编辑器之间可互相切换(点击工具栏中的切换按钮):
- wz.html ↔ wz1.php(新版与升级版互切)
- wz1.php ↔ wz1.html(升级版与在线版互切)
- wz1.php ↔ wz.php(升级版与旧版互切)
📤 上传流程
- 用户点击上传按钮打开上传弹窗
- 选择文件后通过 FormData 发送
- 调用 api.php?action=upload 处理上传
- 上传成功后刷新文件列表
🗑️ 删除流程
- 用户点击删除按钮
- 弹出确认对话框
- 确认后调用 api.php?action=delete
- 删除成功后刷新文件列表
📤 分块上传流程(核心功能)
分块上传是本网盘的核心功能之一,用于支持大文件上传。
前端分块逻辑
- 文件选择:用户选择要上传的文件
- 分块计算:根据文件大小计算分块数量,默认分块大小为 10MB
- 生成唯一标识:创建 fileId(时间戳 + 随机数)用于标识本次上传
- 逐块上传:循环切割文件,每块单独上传
- 上传参数:每个分块包含 chunk(文件块)、fileName、chunkIndex、totalChunks、fileId、path
- 调用接口:POST 请求 api.php?action=chunk_upload
- 进度更新:实时显示上传进度和速度
- 完成判断:根据返回的 completed 字段判断是否全部上传完成
后端合并逻辑
- 接收分块:接收前端上传的分块数据
- 临时存储:将每个分块保存到临时目录(temp/chunks/fileId/)
- 记录状态:记录已上传的分块索引
- 检查完整性:判断是否所有分块都已上传
- 合并文件:如果所有分块都已上传,按顺序合并成完整文件
- 移动文件:将合并后的文件移动到目标目录
- 清理临时文件:删除临时分块文件
- 返回结果:返回上传成功或失败的状态
分块上传的优势
- 支持大文件:突破 PHP 默认上传大小限制
- 断点续传:支持中断后继续上传(需额外实现)
- 容错性强:单个分块失败只需重新上传该块
- 进度可控:实时显示上传进度
关键参数说明
| 参数名 |
说明 |
示例值 |
| chunk |
文件分块数据 |
Blob 对象 |
| fileName |
原始文件名 |
document.pdf |
| chunkIndex |
当前分块索引(从0开始) |
0, 1, 2... |
| totalChunks |
总分块数 |
5 |
| fileId |
本次上传的唯一标识 |
1700000000_abc123 |
| path |
目标目录路径 |
wp/documents/ |
⚠️ 免责声明
本网盘系统仅供内部使用和个人学习目的。
- 用户需自行负责上传文件的合法性和版权问题
- 管理员有权删除违规文件
- 本系统不保证文件的永久保存
- 建议定期备份重要文件
- 因使用本系统导致的任何损失,本系统不承担责任
©️ 版权声明
本网盘系统及其相关组件的版权归开发者所有。
- 系统基于开源组件构建,相关组件遵循其原始开源协议
- jPreview 预览插件:遵循 MIT 协议
- Element UI:遵循 MIT 协议
- Vue.js:遵循 MIT 协议
- 禁止未经授权的商业使用
版本:2.0.0 | 更新日期:2026年5月