mirrors2/ONE
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

文件上传：R2 对象存储 + 后台文件管理 + 编辑器/封面联动

Browse Source 
存储抽象（internal/storage，新包）
- BlobStore 接口（Put / Open / Delete）+ 两个实现：R2（aws-sdk-go-v2 走
  R2 的 S3 兼容 API，path-style、region auto）与本地磁盘（DataDir/uploads，
  零配置兜底）。选择：Endpoint / S3Api / Bucket / AccessKey / SecretAccessKey
  齐全 → R2，缺任一项回落本地并在启动日志提示缺失的字段名（只报名字不报值）
- 端点 URL 里的路径段不交给 SDK：path-style 下它会被折进对象 key，
  导致「数据库 key」和「实际对象 key」对不上（直链 404，实测复现）。
  EndpointKeyPrefix 提取路径段给上传 handler 拼进 key，StripEndpointPath
  只取 scheme://host 给 SDK——数据库 / 存储端 / 直链三方一致

数据与 API
- files 表：id / key(唯一) / name / mime / size / sha256 / store(r2|local) /
  created_at；URL 不入库，按「store 来源 + PublicBase」响应时解析，
  切存储端不破坏存量链接
- POST /api/admin/files：multipart 多文件，单文件 ≤50MB（MaxBytesReader 64MB）；
  类型白名单 = 图片（jpg/png/webp/gif/avif）+ 附件（pdf/zip/txt），
  扩展名 + http.DetectContentType 双重校验（实测拦截随机字节改名 .png），
  SVG 拒绝（同源脚本）；内容 sha256 做 key（2026/09/{哈希前12位}{扩展名}），
  同内容重复上传自动去重复用
- GET /api/admin/files（分页 + 文件名搜索）、DELETE /{id}（先删对象再删行，
  存储端失败保留行可重试）
- 公开路由 GET /uploads/{key}（main.go 挂载）：按 key 查行、存储层流式返回，
  Cache-Control immutable + ETag 304；R2 + PublicBase 时 302 直链（后端不出流量）
- URL 解析：FileURL(store, key, PublicBase)——R2 且配了公开域名走直链，
  否则 /uploads/ 流式

后台文件管理页（FilesView，「工作台 → 文件」）
- 点击 / 拖拽多选上传（uploadFiles 走 FormData 裸 fetch，401 广播与
  request() 一致）；缩略图卡片网格（图片出图、其他出类型占位）；
  复制链接（clipboard，非 https 回落 prompt）/ 打开 / 删除（确认提示）；
  分页、loading/empty 沿用既有模式

编辑器联动（EditorView）
- 封面：URL 输入框旁「上传」按钮，选图自动填 cover_url
- wysiwyg：Crepe ImageBlock 官方 onUpload 钩子——粘贴 / 拖拽 / 插图
  全部走上传，返回 URL 后由 Crepe 插节点
- Markdown 模式：插图弹层加「上传」按钮 + 编辑器粘贴 / 拖拽图片，
  上传后在原光标处插入 ![](url)（异步上传先记光标位，逐张追踪偏移）

.env.example
- 模板入库（无敏感值）：Endpoint = 公开访问域名（直链）、S3Api = 上传端点、
  Bucket / AccessKey / SecretAccessKey

验证
- 本地兜底全流程：上传 201、同内容去重复用、随机字节改名 .png 被
  内容嗅探拒绝、.svg 拒绝、公开路由 immutable 缓存头 + 内容一致、
  删除后存储与公开路由双清 404
- R2 真实链路（站主 .env）：上传 store=r2、直链 200（过程中定位并修复
  S3Api 路径段折进 key 导致的直链 404，见 EndpointKeyPrefix）
- 后端 go build/test/vet 全绿；前端构建通过
This commit is contained in:
Sakurasan
2026-09-27 16:26:11 +08:00
parent bc1b0ccce3
commit 34f0faedcc
18 changed files with 1191 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/admin/EditorView.vue
+110 -11
View File
@@ -141,6 +141,11 @@ async function initEditor() {
featureConfigs: {
[CrepeFeature.Placeholder]: {
text: form.kind === 'short' ? '写点什么…' : '开始写，或按 / 唤出命令菜单'
},
// 图片上传：wysiwyg 里的粘贴 / 拖拽 / 插图按钮全部走后台文件上传，
// onUpload 返回 URL 后由 Crepe 自己插节点
[CrepeFeature.ImageBlock]: {
onUpload: (file) => uploadOne(file)
}
}
})
@@ -520,6 +525,86 @@ function commitImage() {
showImageInput.value = false
}
// ---------- 上传（封面 / 编辑器插图共用） ----------
// 后台「高级 → 自定义 JS」无关；走 /api/admin/files（FormData）。
const uploadingImage = ref(false)
async function uploadOne(file) {
const fd = new FormData()
fd.append('file', file)
try {
const data = await adminApi.uploadFiles(fd)
const f = Array.isArray(data) ? data[0] : null
if (!f || !f.url) throw new Error('上传失败')
return f.url
} catch (e) {
error.value = e.message || '上传失败'
throw e
}
}
const coverInput = ref(null)
async function onCoverPick(e) {
const file = e.target.files && e.target.files[0]
e.target.value = '' // 允许重复选同一个文件
if (!file) return
uploadingImage.value = true
try {
form.cover_url = await uploadOne(file)
} finally {
uploadingImage.value = false
}
}
const imageInput = ref(null)
async function onImagePick(e) {
const file = e.target.files && e.target.files[0]
e.target.value = ''
if (!file) return
uploadingImage.value = true
try {
imageUrl.value = await uploadOne(file)
if (!imageAlt.value) imageAlt.value = file.name.replace(/\.[^.]+$/, '')
commitImage()
} finally {
uploadingImage.value = false
}
}
// md 面板的粘贴 / 拖拽图片：上传后在原光标处插入 markdown。
// 上传是异步的，先记光标位置，逐张插入时用 pos 追踪偏移。
function captureSel() {
const el = mdPane.value
const s = el ? el.selectionStart : form.content_md.length
const e = el ? el.selectionEnd : s
return { s, e: Math.max(s, e) }
}
async function onMdFiles(files, sel) {
let pos = sel.s
for (const f of files) {
try {
const url = await uploadOne(f)
const md = `![](${url})\n`
insertAtCursor(md, pos, pos)
pos += md.length
} catch (_) {
/* uploadOne 已把错误写进 error */
}
}
}
function onMdPaste(e) {
const files = [...(e.clipboardData?.files || [])].filter((f) => f.type.startsWith('image/'))
if (!files.length) return
e.preventDefault()
onMdFiles(files, captureSel())
}
function onMdDrop(e) {
const files = [...(e.dataTransfer?.files || [])].filter((f) => f.type.startsWith('image/'))
if (!files.length) return
e.preventDefault()
onMdFiles(files, captureSel())
}
function insertDate() {
withSelection((s, e) => insertAtCursor(new Date().toISOString().slice(0, 10), s, e))
}
@@ -670,8 +755,14 @@ const tbGroups = computed(() => [
aria-label="图片 URL"
@keydown.enter="commitImage"
/>
<button class="btn btn-primary" @click="commitImage">插入</button>
<button class="btn" @click="showImageInput = false">取消</button>
<div style="display: flex; gap: 6px;">
<button class="btn btn-primary" style="flex: 1;" @click="commitImage">插入</button>
<button class="btn" style="flex: 1;" :disabled="uploadingImage" @click="imageInput.click()">
{{ uploadingImage ? '上传中…' : '上传' }}
</button>
<button class="btn" @click="showImageInput = false">取消</button>
</div>
<input ref="imageInput" type="file" accept="image/*" hidden @change="onImagePick" />
</div>
<!-- editor area -->
@@ -683,6 +774,8 @@ const tbGroups = computed(() => [
v-model="form.content_md"
placeholder="直接写 Markdown…"
aria-label="Markdown 正文"
@paste="onMdPaste"
@drop="onMdDrop"
></textarea>
<div class="editor-stats">
@@ -715,15 +808,21 @@ const tbGroups = computed(() => [
<div v-if="form.cover_url" class="cover-mini" :style="{ backgroundImage: `url(${form.cover_url})` }">
<button class="x" @click="clearCover" aria-label="移除封面">×</button>
</div>
<input
id="cover"
v-model="form.cover_url"
placeholder="封面图 URL（可省）"
type="url"
inputmode="url"
spellcheck="false"
aria-label="封面图 URL"
/>
<div class="cover-row">
<input
id="cover"
v-model="form.cover_url"
placeholder="封面图 URL（可省）"
type="url"
inputmode="url"
spellcheck="false"
aria-label="封面图 URL"
/>
<button class="btn" type="button" :disabled="uploadingImage" @click="coverInput.click()">
{{ uploadingImage ? '上传中…' : '上传' }}
</button>
</div>
<input ref="coverInput" type="file" accept="image/*" hidden @change="onCoverPick" />
<p style="margin: 4px 0 0; font-size: 12px; color: var(--admin-muted);">回车或失焦即生效；前台卡片与详情页头图会用到。</p>
</div>