Nest Vue Admin

Appearance

文件上传 ​

系统提供完整的文件管理功能，支持多种存储方式。

功能概览 ​

  • 文件上传（拖拽上传、点击上传）
  • 多种存储方式：本地存储、阿里云 OSS
  • 文件管理（列表、预览、删除）
  • 文件标签系统
  • 按文件类型、标签筛选

存储配置 ​

在 .env 文件中配置存储方式：

bash
# 上传模式: local | oss
UPLOAD_MODE=local

# 本地存储配置
UPLOAD_DIR=./uploads

# 阿里云 OSS 配置（UPLOAD_MODE=oss 时需要）
OSS_ACCESS_KEY_ID=your_access_key
OSS_ACCESS_KEY_SECRET=your_secret_key
OSS_BUCKET=your_bucket
OSS_REGION=oss-cn-hangzhou
OSS_ENDPOINT=https://oss-cn-hangzhou.aliyuncs.com

文件上传限制 ​

  • 默认支持常见图片、文档、压缩包格式
  • 单文件大小限制：可在后端配置中调整
  • 上传时自动生成唯一文件名，避免冲突

操作说明 ​

上传文件 ​

  1. 进入「文件管理」页面
  2. 点击上传区域或将文件拖拽到上传区域
  3. 可以为文件添加标签
  4. 上传完成后文件自动出现在列表中

管理文件 ​

  • 按文件名搜索
  • 按标签筛选
  • 查看文件详情
  • 复制文件链接
  • 删除文件

在代码中使用 ​

头像上传 ​

个人中心的头像上传功能已内置文件上传组件，限制 2MB 以内。

通用文件上传 ​

vue
<el-upload
  action="/api/upload/file"
  :headers="{ Authorization: `Bearer ${token}` }"
  :on-success="handleSuccess"
>
  <el-button type="primary">点击上传</el-button>
</el-upload>

API 接口 ​

方法路径说明
POST/upload/file上传文件
GET/upload/file获取文件列表
GET/upload/file/:id获取文件详情
PUT/upload/file/:id更新文件信息
DELETE/upload/file/:id删除文件
DELETE/upload/file批量删除文件
DELETE/upload/file/by-url按 URL 删除文件