EasyAdminBlazor 第八篇：文件管理——上传、预览、压缩、WebP一键转换

关键词：admin blazor 文件上传

每个后台系统都离不开文件管理。

用户头像、商品图片、文章封面、附件文档……上传、存储、展示、管理，一套流程下来，看着简单，做起来全是细节：

• 用户传了 exe、bat 怎么办

• 图片太大了，页面加载慢

• 文件路径怎么输入、怎么预览

• 多租户的文件会不会混在一起

EasyAdminBlazor 的文件管理模块，把这些全包了。

一、AdminFileInput：文件路径输入 + 预览一体

不需要写任何 JS 上传逻辑，直接使用 AdminFileInput 组件：

razor

<AdminFileInput @bind-Value="@filePath" DisplayText="附件路径" />

功能特性：

功能	说明
只读文本框	显示文件上传后的存储路径，不可手动编辑
打开文件选择器	点击组件弹出 FilePicker 弹窗，选择已有文件或重新上传
图片悬浮预览	鼠标悬停在路径上，Popover 弹出图片预览（支持 jpg、png、webp 等）
清除已选文件	一键清空当前绑定的文件路径

一行代码，搞定文件选择、路径绑定、图片预览。

实际文件上传由 FileService 完成，AdminFileInput 只负责路径绑定和预览展示。

二、上传验证：白名单 + 黑名单 + 大小限制

文件上传是安全重灾区。EasyAdminBlazor 内置多层防护：

json

{
  "FileSettings": {
    "IncludeExtension": [ ".jpg", ".jpeg", ".png", ".gif", ".pdf", ".docx" ],
    "ExcludeExtension": [ ".exe", ".dll", ".bat", ".cmd", ".vbs" ],
    "MaxFileSize": 10
  }
}

配置	作用
IncludeExtension	只允许这些后缀上传
ExcludeExtension	额外禁止高危后缀
MaxFileSize	单文件最大 10MB（默认）

后端还会通过 ImageSharp 检测图片文件的有效性，防止伪装文件。

三、图片处理：压缩 + WebP 一键转换

上传的图片自动经过以下处理：

处理步骤	说明
格式验证	通过 ImageSharp 检测是否为有效图片
尺寸压缩	超过配置的最大宽度时自动等比缩放
格式转换	自动转为 WebP 格式，显著减小体积

json

{
  "FileSettings": {
    "MaxImageWidth": 800,
    "WebpQuality": 80,
    "KeepOriginalFile": false
  }
}

上传一张 5MB 的 JPG → 自动压缩 + 转 WebP → 输出几百 KB 的 WebP 文件

页面加载速度提升 5-10 倍，用户完全无感知。

四、分组管理 + 多租户隔离

按日期自动归档

text

wwwroot/uploads/2026/06/17/xxx.webp

结构清晰，便于后期维护。

手动分组

上传时可以手动选择分组，把文件归类到不同的业务目录下。

多租户隔离（启用多租户时）

text

wwwroot/uploads/{tenantCode}/yyyy/MM/dd/xxx.webp

租户A 看不到租户B 的文件，物理隔离，安全可靠。

五、文件列表与预览

文件上传后，在管理后台展示：

• 文件名：原始文件名称，带类型图标

• 文件大小：自动格式化显示（KB / MB / GB）

• 上传时间：记录上传时间

• 分组：所属分组

• 图片预览：鼠标悬停或点击即可预览

左侧分组树快速筛选，右侧列表展示，管理高效。

六、总结

功能	EasyAdminBlazor 做法
文件路径输入 + 预览	AdminFileInput 组件，一行搞定
上传验证	配置文件白名单 + 黑名单 + 大小限制
图片处理	自动压缩 + WebP 转换
文件管理	列表展示 + 分组筛选 + 预览
多租户隔离	按租户编码自动分目录存储

从文件选取到路径绑定、图片预览、压缩转换、管理，全链路覆盖，一行代码不用写。

下一篇预告

《EasyAdminBlazor 第九篇：》——你想看什么？评论区告诉我。