RuoYi-Vue文件上传下载：多种格式支持与安全控制

【免费下载链接】RuoYi-Vue :tada: (RuoYi)官方仓库 基于SpringBoot，Spring Security，JWT，Vue & Element 的前后端分离权限管理系统，同时提供了 Vue3 的版本 项目地址: https://gitcode.com/gh_mirrors/ruoyiv/RuoYi-Vue

RuoYi-Vue是基于SpringBoot和Vue的前后端分离权限管理系统，提供了强大的文件上传下载功能，支持多种格式文件处理和完善的安全控制机制。无论是图片、文档还是压缩文件，都能通过系统的通用上传接口轻松管理，同时内置的安全校验机制确保文件传输过程中的数据安全。

📂 核心功能概览

RuoYi-Vue的文件处理模块主要通过CommonController实现，提供了完整的上传下载接口：

• 单文件上传：通过/common/upload接口实现单个文件上传
• 多文件上传：通过/common/uploads接口支持批量文件上传
• 文件下载：通过/common/download接口提供文件下载服务
• 本地资源下载：通过/common/download/resource接口访问系统资源

这些接口位于ruoyi-admin/src/main/java/com/ruoyi/web/controller/common/CommonController.java，为整个系统提供统一的文件处理能力。

🚀 多种格式支持特性

系统支持丰富的文件格式，满足不同业务场景需求：

支持的文件类型

• 图片格式：bmp、gif、jpg、jpeg、png（定义于ruoyi-common/src/main/java/com/ruoyi/common/utils/file/MimeTypeUtils.java）
• 文档格式：doc、docx、xls、xlsx、ppt、pptx、html、htm、txt
• 压缩文件：rar、zip、gz、bz2
• 视频格式：mp4、avi、rmvb
• 其他格式：pdf等

文件大小限制

系统默认限制单个文件大小不超过50MB，可通过修改FileUploadUtils中的DEFAULT_MAX_SIZE参数调整：

public static final long DEFAULT_MAX_SIZE = 50 * 1024 * 1024; // 50MB

文件名长度限制

默认文件名长度限制为100个字符，防止过长文件名导致的问题：

public static final int DEFAULT_FILE_NAME_LENGTH = 100;

🔒 安全控制机制

RuoYi-Vue在文件处理过程中融入了多重安全控制措施，确保系统安全：

文件类型校验

系统通过MimeTypeUtils定义允许上传的文件类型，并在上传前进行严格校验：

String extension = getExtension(file);
if (allowedExtension != null && !isAllowedExtension(extension, allowedExtension)) {
    throw new InvalidExtensionException(allowedExtension, extension, fileName);
}

文件大小校验

上传文件前会检查文件大小是否超过限制：

long size = file.getSize();
if (size > DEFAULT_MAX_SIZE) {
    throw new FileSizeLimitExceededException(DEFAULT_MAX_SIZE / 1024 / 1024);
}

文件名安全处理

系统会对上传的文件名进行重新编码，避免特殊字符和路径遍历攻击：

return StringUtils.format("{}/{}_{}.{}", DateUtils.datePath(),
    FilenameUtils.getBaseName(file.getOriginalFilename()), 
    Seq.getId(Seq.uploadSeqType), getExtension(file));

下载权限控制

下载文件前会检查文件名合法性，防止未授权访问：

if (!FileUtils.checkAllowDownload(fileName)) {
    throw new Exception(StringUtils.format("文件名称({})非法，不允许下载。 ", fileName));
}

💻 前端实现

在前端Vue界面中，文件上传功能通过组件化方式实现，主要使用FileUpload组件：

<template>
  <div class="component-upload-image">
    <el-upload
      :action="uploadUrl"
      list-type="picture-card"
      :on-success="handleUploadSuccess"
      :before-upload="handleBeforeUpload">
      <i class="el-icon-plus"></i>
    </el-upload>
  </div>
</template>

相关组件代码位于ruoyi-ui/src/components/FileUpload/index.vue，通过调用后端接口实现文件上传功能。

📝 使用指南

环境准备

1. 克隆仓库：git clone https://gitcode.com/gh_mirrors/ruoyiv/RuoYi-Vue
2. 按照项目文档配置环境并启动服务

上传文件

1. 调用/common/upload接口上传单个文件
2. 调用/common/uploads接口上传多个文件
3. 上传成功后返回文件访问URL和相关信息

下载文件

1. 调用/common/download接口下载文件
2. 传入文件名参数，系统验证通过后返回文件流

🛠️ 扩展与定制

修改上传路径

通过修改RuoYiConfig中的profile参数自定义上传文件存储路径：

@Value("${ruoyi.profile}")
private String profile;

扩展文件类型

修改MimeTypeUtils中的DEFAULT_ALLOWED_EXTENSION数组，添加新的文件扩展名：

public static final String[] DEFAULT_ALLOWED_EXTENSION = {
    // 现有类型...
    "newext" // 添加新的文件扩展名
};

调整文件大小限制

修改FileUploadUtils中的DEFAULT_MAX_SIZE参数调整最大文件大小限制：

public static final long DEFAULT_MAX_SIZE = 100 * 1024 * 1024; // 修改为100MB

RuoYi-Vue的文件上传下载模块提供了企业级的解决方案，兼顾了功能丰富性和安全性，通过灵活的配置和扩展机制，可以满足各种文件处理需求。无论是小型项目还是大型系统，都能从中受益。

【免费下载链接】RuoYi-Vue :tada: (RuoYi)官方仓库 基于SpringBoot，Spring Security，JWT，Vue & Element 的前后端分离权限管理系统，同时提供了 Vue3 的版本 项目地址: https://gitcode.com/gh_mirrors/ruoyiv/RuoYi-Vue