tao.chen/file-upload
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: file viewer

Browse Source
This commit is contained in:
tao.chen
2026-08-31 15:19:46 +08:00
parent 51f1fe96bf
commit b257f6700f
6 changed files with 323 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+10 -6
View File
@@ -28,12 +28,15 @@ curl -F "file=@report.pdf" http://localhost:8080/upload
## 配置(命令行 flag)
```text
-dir ./data/uploads 上传文件保存目录
-listen :8080 HTTP 监听地址
-ttl 24h 文件过期 TTL
-scan 1h 清理扫描间隔
-quota 10737418240 总目录配额(字节,默认 10 GB;0 = 不限)
-audit-dir ./data/audit 审计日志目录(每天一个 YYYY-MM-DD.log 文件;空字符串禁用)
-dir ./data/uploads 上传文件保存目录
-listen :8080 HTTP 监听地址
-ttl 24h 文件过期 TTL
-scan 1h 清理扫描间隔
-quota 10737418240 总目录配额(字节,默认 10 GB;0 = 不限)
-audit-dir ./data/audit 审计日志目录(每天一个 YYYY-MM-DD.log 文件;空字符串禁用)
-file-viewer-cdn https://unpkg.com/@file-viewer/web-full@3.0.0 文件预览库 CDN 地址
-file-viewer-cache ./data/file-viewer 文件预览库资源缓存目录(空字符串 = 禁用,全部 CDN 透传)
-file-viewer-ttl 0 缓存文件有效期(0 = 永久)
```
示例:把 TTL 改成 1 小时、配额 1 GB:
@@ -55,6 +58,7 @@ curl -F "file=@report.pdf" http://localhost:8080/upload
| POST | `/download-zip` | 批量下载 (body: `{"files":[...]}`, 最多 100 项) |
| POST | `/files-delete` | 批量删除 (body: `{"files":[...]}`, 最多 100 项) |
| DELETE | `/files/:filename` | 删除文件 |
| GET | `/file-viewer/*filepath` | 文件预览库资源(CDN 缓存代理) |
---
fileviewer.go
+171
View File
@@ -0,0 +1,171 @@
package main
import (
"flag"
"io"
"log"
"net/http"
"os"
"path"
"path/filepath"
"strings"
"time"
"github.com/gin-gonic/gin"
)
// -----------------------------------------------------------------------------
// file-viewer CDN 资源本地缓存代理
//
// 前端 HTML 引用 /file-viewer/dist/flyfish-file-viewer-web-full.iife.js, 后端
// 先读本地缓存, 命中直接返回; 未命中从 unpkg 拉, 边写盘边流回客户端, 后续请求
// 全部走磁盘. vendor/ 资源同理按需拉取.
//
// 设计取舍:
// - 缓存键 = URL 相对路径 (如 dist/foo.js / vendor/libarchive/worker-bundle.js).
// 升级 library 版本需手动 -rm 缓存目录, 避免旧版资源污染.
// - 缓存目录不可写时降级为纯 CDN 透传, 不阻断预览功能.
// - 缓存关闭 (-file-viewer-cache="") 时完全走 CDN, 行为与改造前一致.
// -----------------------------------------------------------------------------
var (
fileViewerCDN = flag.String("file-viewer-cdn", "https://unpkg.com/@file-viewer/web-full@3.0.0", "file-viewer CDN base URL")
fileViewerCacheDir = flag.String("file-viewer-cache", "./data/file-viewer", "file-viewer 资源缓存目录 (空字符串 = 禁用缓存, 全部 CDN 透传)")
fileViewerCacheTTL = flag.Duration("file-viewer-ttl", 0, "缓存文件最大有效期 (0 = 永久, 仅在文件已存在时刷新 Content-Type)")
)
// 30 min 足够 330 KB 的 iife 与 vendor/ 下最大的 docx/pptx wasm (~50 MB) 在慢网下完成
var fileViewerHTTPClient = &http.Client{Timeout: 30 * time.Minute}
// fileViewerProxy 处理 GET /file-viewer/*filepath.
// 1. 校验路径防 ../ 越界
// 2. 缓存命中 -> 直接读盘
// 3. 缓存未命中 -> 拉上游, 边写盘边流回
// 4. 缓存关闭 -> 直接透传到 CDN
func fileViewerProxy(c *gin.Context) {
raw := c.Param("filepath")
name, ok := validateFileViewerPath(raw)
if !ok {
c.JSON(http.StatusBadRequest, gin.H{"error": "invalid path"})
return
}
if *fileViewerCacheDir == "" {
proxyFileViewer(c, name)
return
}
cachePath := filepath.Join(*fileViewerCacheDir, filepath.FromSlash(name))
// 命中: 直接读盘 (TTL > 0 且文件超过有效期则强制回源)
if info, err := os.Stat(cachePath); err == nil && !info.IsDir() {
if *fileViewerCacheTTL <= 0 || time.Since(info.ModTime()) < *fileViewerCacheTTL {
c.Header("Cache-Control", "public, max-age=31536000, immutable")
c.File(cachePath)
return
}
log.Printf("[file-viewer] cache expired, refetching %s", name)
}
// 未命中: 拉上游 + 边写盘边流回
fetchAndCache(c, cachePath, name)
}
// validateFileViewerPath 校验并清理 fileviewer 子路径, 防 ../ 越界.
// gin 的 *filepath wildcard 包含前导 '/', 先 strip 再清理.
// 先按 '/' 切分检查 `..` 分量 (path.Clean 会折叠中间 .., 仅靠它不够),
// 再 path.Clean 兜底处理 // / ./ 等冗余.
func validateFileViewerPath(raw string) (string, bool) {
raw = strings.TrimPrefix(raw, "/")
if raw == "" || strings.ContainsRune(raw, 0) {
return "", false
}
for part := range strings.SplitSeq(raw, "/") {
if part == ".." {
return "", false
}
}
clean := path.Clean(raw)
if clean == "." || clean == "" || strings.HasPrefix(clean, "..") || strings.HasPrefix(clean, "/") {
return "", false
}
return clean, true
}
// proxyFileViewer: 缓存关闭时直接透传到 CDN.
func proxyFileViewer(c *gin.Context, name string) {
upstream := upstreamURL(name)
resp, err := fileViewerHTTPClient.Get(upstream)
if err != nil {
log.Printf("[file-viewer] upstream fetch %s: %v", name, err)
c.JSON(http.StatusBadGateway, gin.H{"error": "upstream fetch failed"})
return
}
defer resp.Body.Close()
if ct := resp.Header.Get("Content-Type"); ct != "" {
c.Header("Content-Type", ct)
}
c.Status(resp.StatusCode)
if _, err := io.Copy(c.Writer, resp.Body); err != nil {
log.Printf("[file-viewer] stream %s: %v", name, err)
}
}
// fetchAndCache: 从 CDN 拉取资源, 同时写盘 + 流回客户端.
func fetchAndCache(c *gin.Context, cachePath, name string) {
upstream := upstreamURL(name)
resp, err := fileViewerHTTPClient.Get(upstream)
if err != nil {
log.Printf("[file-viewer] upstream fetch %s: %v", name, err)
c.JSON(http.StatusBadGateway, gin.H{"error": "upstream fetch failed"})
return
}
defer resp.Body.Close()
if resp.StatusCode != http.StatusOK {
log.Printf("[file-viewer] upstream %s returned %d", name, resp.StatusCode)
c.JSON(http.StatusBadGateway, gin.H{"error": "upstream returned " + resp.Status})
return
}
if ct := resp.Header.Get("Content-Type"); ct != "" {
c.Header("Content-Type", ct)
}
c.Header("Cache-Control", "public, max-age=31536000, immutable")
c.Status(http.StatusOK)
// 目录创建失败 -> 降级透传, 不缓存
if err := os.MkdirAll(filepath.Dir(cachePath), 0o755); err != nil {
log.Printf("[file-viewer] mkdir cache dir: %v", err)
_, _ = io.Copy(c.Writer, resp.Body)
return
}
f, err := os.Create(cachePath)
if err != nil {
log.Printf("[file-viewer] create cache file: %v", err)
_, _ = io.Copy(c.Writer, resp.Body)
return
}
// 关键: MultiWriter 让客户端拿到的同时落盘, 用户感知零等待
mw := io.MultiWriter(c.Writer, f)
written, copyErr := io.Copy(mw, resp.Body)
cErr := f.Close()
if copyErr != nil || cErr != nil {
_ = os.Remove(cachePath) // 写一半的文件清理掉, 下次重新拉
if copyErr != nil {
log.Printf("[file-viewer] copy %s: %v", name, copyErr)
}
if cErr != nil {
log.Printf("[file-viewer] close %s: %v", name, cErr)
}
return
}
log.Printf("[file-viewer] cached %s (%d bytes)", name, written)
}
func upstreamURL(name string) string {
return strings.TrimRight(*fileViewerCDN, "/") + "/" + name
}
main.go
+3
View File
@@ -64,6 +64,9 @@ func main() {
r.DELETE("/files/:filename", deleteHandler)
r.GET("/files", listHandler)
// file-viewer CDN 资源本地缓存代理 (前端文件预览依赖)
r.GET("/file-viewer/*filepath", fileViewerProxy)
log.Printf("server listening on %s, uploads -> %s, ttl=%s", *listen, *uploadDir, *fileTTL)
if err := r.Run(*listen); err != nil {
log.Fatal(err)
static/app.css
+62
View File
@@ -357,3 +357,65 @@
transition: width 0.2s;
}
.total-label { font-size: 12px; color: var(--text-dim); white-space: nowrap; }
/* Preview modal */
.preview-modal {
position: fixed;
inset: 0;
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
}
.preview-modal[hidden] { display: none; }
.preview-backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(2px);
}
.preview-panel {
position: relative;
width: min(1100px, 92vw);
height: min(820px, 88vh);
background: var(--panel);
border: 1px solid var(--border);
border-radius: 12px;
box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
display: flex;
flex-direction: column;
overflow: hidden;
}
.preview-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 16px;
border-bottom: 1px solid var(--border);
background: var(--panel-2);
}
.preview-title {
flex: 1;
min-width: 0;
color: var(--text);
font-size: 14px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.preview-actions { display: flex; gap: 6px; flex-shrink: 0; }
.preview-body {
flex: 1;
min-height: 0;
background: var(--bg);
overflow: auto;
}
.preview-loading {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
color: var(--text-dim);
font-size: 14px;
}
static/app.js
+61
View File
@@ -23,6 +23,12 @@ const batchBtn = $('batchBtn');
const batchCount = $('batchCount');
const batchDeleteBtn = $('batchDeleteBtn');
const batchDeleteCount= $('batchDeleteCount');
const previewModal = $('previewModal');
const previewBackdrop= $('previewBackdrop');
const previewTitle = $('previewTitle');
const previewBody = $('previewBody');
const previewClose = $('previewClose');
const previewDownload= $('previewDownload');
// pending[i] = { id, file, xhr, status: 'pending'|'uploading'|'done'|'error'|'cancelled', progress, error }
let pending = [];
@@ -377,12 +383,14 @@ function fileRow(f) {
</div>
</div>
<div class="file-actions">
<button class="icon-btn" title="预览" data-preview="${escapeHtml(f.filename)}">▷</button>
<button class="icon-btn" title="复制链接" data-url="${escapeHtml(f.url)}">⎘</button>
<a class="icon-btn" title="下载" href="${escapeHtml(f.url)}" download>↓</a>
<button class="icon-btn danger" title="删除" data-delete="${escapeHtml(f.filename)}">✕</button>
</div>
`;
div.querySelector('.file-check').addEventListener('change', e => onCheckChange(f.filename, e.target.checked));
div.querySelector('[data-preview]').onclick = () => openPreview(f.filename, f.url);
div.querySelector('[data-url]').onclick = () => copyToClipboard(location.origin + f.url);
div.querySelector('[data-delete]').onclick = () => deleteFile(f.filename, div);
return div;
@@ -439,5 +447,58 @@ async function copyToClipboard(text) {
}
}
// ---------------------------------------------------------------------------
// Preview modal (依赖 CDN 加载的 FlyfishFileViewerWebFull 全局对象)
// ---------------------------------------------------------------------------
let previewViewer = null;
function openPreview(filename, url) {
if (!window.FlyfishFileViewerWebFull) {
toast('预览组件尚未加载完成, 请稍后再试', 'error');
return;
}
previewTitle.textContent = filename;
previewDownload.href = url;
previewDownload.download = filename;
previewBody.innerHTML = '<div class="preview-loading">加载中...</div>';
previewModal.hidden = false;
document.body.style.overflow = 'hidden';
// 卸载上一个实例, 防内存泄漏
if (previewViewer && typeof previewViewer.destroy === 'function') {
try { previewViewer.destroy(); } catch {}
}
previewViewer = null;
// mountViewer 接收 element 或 selector; 用容器 id 保证重入安全
try {
previewViewer = window.FlyfishFileViewerWebFull.mountViewer(previewBody, {
url,
options: {
theme: 'dark',
toolbar: { position: 'bottom-right' },
},
});
} catch (e) {
previewBody.innerHTML = `<div class="preview-loading">预览失败: ${escapeHtml(e && e.message || 'unknown')}</div>`;
}
}
function closePreview() {
previewModal.hidden = true;
document.body.style.overflow = '';
if (previewViewer && typeof previewViewer.destroy === 'function') {
try { previewViewer.destroy(); } catch {}
}
previewViewer = null;
previewBody.innerHTML = '';
}
previewClose.addEventListener('click', closePreview);
previewBackdrop.addEventListener('click', closePreview);
document.addEventListener('keydown', e => {
if (e.key === 'Escape' && !previewModal.hidden) closePreview();
});
// formatRemain / isAlmostExpired / iconFor / formatSize / formatTime / escapeHtml
// 见 helpers.js; 倒计时 setInterval 也在 helpers.js 中启动
static/index.html.tpl
+16
View File
@@ -62,6 +62,22 @@
<div class="toast" id="toast"></div>
<!-- 文件预览弹窗 (CDN 资源经后端 /file-viewer/*filepath 缓存代理, 避免运行时 unpkg 依赖) -->
<div class="preview-modal" id="previewModal" hidden>
<div class="preview-backdrop" id="previewBackdrop"></div>
<div class="preview-panel">
<div class="preview-header">
<span class="preview-title" id="previewTitle"></span>
<div class="preview-actions">
<a class="icon-btn" id="previewDownload" title="下载" download>↓</a>
<button class="icon-btn" id="previewClose" title="关闭" aria-label="关闭预览">✕</button>
</div>
</div>
<div class="preview-body" id="previewBody"></div>
</div>
</div>
<script src="/file-viewer/dist/flyfish-file-viewer-web-full.iife.js"></script>
<script src="/static/app.js"></script>
<script src="/static/helpers.js"></script>
<script src="/static/batch.js"></script>