跳转到内容

媒体库

「媒体库」是 BangNiCMS 集中管理所有上传文件的中央库。任何在富文本编辑器、产品封面、文章配图、Logo 上传的文件,都会落到这里——一处管理,处处可引用。

后台入口:内容管理 → 媒体库

待补充截图 网格式缩略图展示 + 顶部筛选(文件夹 / 类型)+ 右上角「上传」按钮
后台「媒体库」页全貌

打开后看到网格式缩略图(默认每页 24 个),鼠标悬停显示文件名 / 大小 / 上传时间。

支持的文件类型:

  • 图片:JPG、PNG、GIF、WebP、SVG
  • 视频:MP4、WebM、MOV、Ogg
  • 文档:PDF、DOCX、XLSX
  • 压缩包:ZIP

具体允许的扩展名 + 大小上限由站点设置决定——见 站点设置 → 上传与媒体设置

  1. 点右上角 上传 按钮(或直接拖拽文件到媒体库窗口)

  2. 系统逐个校验

    • 扩展名是否在允许列表
    • 大小是否超过限制(图片 / 视频走不同上限)
  3. 校验通过 → 上传 + 落地到存储 → 立即出现在网格里

  4. (可选)点缩略图 → 编辑 alt 文本、移动到文件夹

待补充截图 拖入多个文件后弹出的进度面板,每个文件独立进度条 / 状态
批量上传进度面板

上传视频时,系统自动抓取视频的第一帧作为缩略图(封面图)。

  • 缩略图自动出现在媒体库网格(不需要单独看视频)
  • 视频在前台播放器里也用这个缩略图作为 poster
  • 你可以手动替换缩略图:编辑视频 → 「替换封面图」

不需要任何配置——这是默认行为。

每个文件可以归入一个文件夹(如 productshero-bannersteam-photos)。

文件夹只是逻辑标签——不影响实际存储路径。用途:在媒体库列表按文件夹筛选,快速定位。

典型组织建议

文件夹名装什么
(空)未分类
products产品图集
hero-banners首页 hero 大图
team-photos团队照片
whitepapers白皮书 PDF
logos品牌 / 合作伙伴 logo

「alt 文本」(图片替代文本)对SEO 与无障碍访问很重要——但运营手写多语言 alt 极其耗时。BangNiCMS 集成了 AI 视觉识别自动生成

  1. 选中一张或多张图片(支持批量)

  2. AI 识别图片说明 按钮

  3. 选择目标语言(如英文 / 日文 / 中文)

  4. 系统调用 AI 视觉模型自动生成:

    • alt 文本:屏幕阅读器 + 搜索引擎用
    • title:鼠标悬停显示
  5. 生成的内容写入图片的多语言 alt 字段,前台立即生效

待补充截图 选中图片后顶部出现「AI 识别」按钮,点击后显示进度 + 识别结果(中英文 alt)
AI 识别按钮与结果预览

注意

  • 仅对图片生效(视频 / PDF 不支持)
  • 必须先在站点设置配置 AI Vision 模型(详见后续「AI 助手」章节)
  • 未配置时点击会提示「视觉识别未启用」
  • AI 生成的内容可以人工修改——AI 不是终点,而是起点

点缩略图打开侧边栏:

  • alt 文本(默认 / 兜底)— 给屏幕阅读器、SEO 用
  • 每种语言的 alt + title(多语言专属)— 切换语言 Tab 编辑
  • 文件夹 — 移动到其他文件夹
待补充截图 右侧弹出的侧边栏,含 alt / 多语言 alt / 文件夹 / 文件信息(名称/大小/类型)
图片编辑侧边栏

优先级(前台显示哪个 alt)

  1. 当前语言下的 alt
  2. 默认语言的 alt
  3. 兜底的默认 alt
  4. 都为空 → 空(不友好,建议至少填一个)
操作行为
单个删除点缩略图 → 侧边栏底部「删除」
批量删除多选 → 顶部「批量删除」

删除会同时

  1. 删掉数据库记录
  2. 删掉物理文件(包括视频缩略图)

所有上传统一受站点设置约束——后台「站点设置 → 系统设置 → 上传与媒体设置」可配置:

配置项默认说明
普通文件大小上限50 MB图片 / PDF / Word / 压缩包等
视频文件大小上限200 MB视频文件单独上限(更大)
允许的扩展名见上白名单,黑名单方式
命名规则保留原名见下文
视频自动首帧封面开启上传视频时自动抓首帧
待补充截图 后台站点设置页中的「上传与媒体」分组,含上限 / 命名规则 / 视频缩略图开关
站点设置 → 上传与媒体设置

两种选项:

  • 保留原文件名(默认)— 保留中文 / 原名,仅做安全化(去除特殊字符),同名时追加时间戳
  • 自动随机命名 — 文件名变成 时间戳-随机串.扩展名

推荐选择

  • B2B 内容站、营销站 → 保留原文件名(用户下载时看到的文件名是中文「产品手册.pdf」,体验好)
  • 高敏感场景(金融、内部资料)→ 自动随机命名(不暴露业务)

。但前提是前端组件正确接入了上传策略——所有 BangNiCMS 内置的上传入口都是从站点设置实时拉取的。

如果你自己开发了主题或插件且自己写了上传组件,请确保不要硬编码 maxSize / accept 等参数——必须从站点设置读取,否则运维改了上限你不知道,会出现”前端校验放行 / 后端拒绝”的尴尬。

上传后图片是原图还是压缩版?

Section titled “上传后图片是原图还是压缩版?”

原图保留。前台展示时由主题或反向代理(如 imgproxy)按需生成多尺寸——BangNiCMS 自身不在上传时做多尺寸压缩,简化部署。

如果你需要自动多尺寸:

  • 部署在 Vercel / Netlify → 平台自带 Image Optimization
  • 部署在 Caddy / Nginx → 接 imgproxythumbor 等图片代理服务

文件能存到外部 CDN(七牛 / 阿里云 OSS / S3)吗?

Section titled “文件能存到外部 CDN(七牛 / 阿里云 OSS / S3)吗?”

当前版本只支持本地文件系统。如果你需要外部 CDN:

  • 简单方案:把存储目录挂载到 OSS 同步(如阿里云 OSSFS)
  • 完整方案:等”对象存储插件”(建设中)

当前不内置。如需要:

  • 上传前在 Photoshop / 在线工具加水印再上传
  • 等”图片水印插件”(建设中)

前端默认队列上限 20 个。后端单请求接收一个文件——批量是前端组装多个独立请求并发发送。

通常 80% 以上准确,但不要完全相信

  • 重要图片(首页 hero、产品封面)跑完 AI 后人工抽检 + 修改
  • 营销页特殊图片手动覆盖(AI 可能太泛)
  • 长尾图片直接用 AI 结果即可
  • alt — 给屏幕阅读器和搜索引擎用,描述图片内容(如”工业激光切割机正面视图”)
  • title — 鼠标悬停时显示的文字(如”X500 激光切割机 - 高精度金属加工”)

两者在 AI 识别时一起生成,前者更长更详细,后者更简洁。

  • 内容模型扩展 — 给产品 / 文章加图集 / 视频字段
  • 站点设置 → 上传与媒体(建设中)— 配置上限和命名规则
  • AI 助手(建设中)— 配置 Vision 模型用于多语言 alt 识别