ruoyi-vue-pro上传文件

### Ruoyi-Vue-Pro 文件上传功能实现 #### 背景说明 Ruoyi-Vue-Pro 是基于 RuoYi 开源项目的增强版本，支持前后端分离架构。文件上传功能通常涉及前端页面设计、后端接口处理以及存储逻辑的实现。 --- #### 前端部分：Vue.js 配置文件上传组件 在 Ruoyi-Vue-Pro 中，文件上传可以通过 `element-plus` 提供的 `<el-upload>` 组件来完成。以下是具体实现方法： ```vue <template> <div> <el-upload class="upload-demo" action="/api/common/upload" :headers="headers" :on-success="handleSuccess" :before-upload="beforeUpload"> <el-button type="primary">点击上传</el-button> </el-upload> </div> </template> <script> import { getToken } from '@/utils/auth'; export default { data() { return { headers: { Authorization: 'Bearer ' + getToken() }, // 设置请求头携带 token }; }, methods: { beforeUpload(file) { const isPDF = file.type === 'application/pdf'; if (!isPDF) { this.$message.error('仅允许上传 PDF 文件'); } const isLt2M = file.size / 1024 / 1024 < 2; if (!isLt2M) { this.$message.error('文件大小不得超过 2MB'); } return isPDF && isLt2M; }, handleSuccess(response, file, fileList) { console.log('上传成功:', response); this.$message.success('文件上传成功！'); }, }, }; </script> ``` 上述代码实现了以下功能： - 使用 `action` 属性指定后端接收文件的 API 地址 `/api/common/upload`[^1]。 - 添加自定义请求头 `Authorization` 来验证用户身份。 - 在 `before-upload` 方法中校验文件类型和大小。 - 成功回调函数 `handleSuccess` 处理返回数据并提示用户操作结果。 --- #### 后端部分：Spring Boot 接口配置 后端通过 Spring Boot 的控制器提供文件上传服务。以下是具体的实现代码： ```java package com.ruoyi.common.controller; import org.springframework.web.bind.annotation.*; import org.springframework.web.multipart.MultipartFile; @RestController @RequestMapping("/common") public class FileController { @PostMapping("/upload") public String uploadFile(@RequestParam("file") MultipartFile file) { try { if (file.isEmpty()) { throw new RuntimeException("文件为空"); } // 获取原始文件名 String originalFilename = file.getOriginalFilename(); // 存储路径设置（可根据实际需求调整） String filePath = "/path/to/save/" + originalFilename; // 将文件保存到服务器 file.transferTo(new java.io.File(filePath)); return "文件上传成功：" + originalFilename; } catch (Exception e) { e.printStackTrace(); return "文件上传失败"; } } } ``` 此代码片段的功能如下： - 定义了一个 POST 请求映射地址 `/common/upload`。 - 参数 `@RequestParam("file")` 表示从前端获取名为 `file` 的文件流。 - 判断文件是否为空，并调用 `transferTo()` 方法将文件写入本地磁盘。 - 返回上传状态给前端。 --- #### 数据库记录与在线预览 如果需要对上传的文件进行管理，则可以在数据库中新增一张表用于存储文件元信息。例如： | 字段名称 | 类型 | 描述 | |----------------|--------------|--------------------| | id | BIGINT(20) | 主键 ID | | filename | VARCHAR(255) | 文件名 | | filepath | TEXT | 文件存储路径 | | filesize | INT | 文件大小（字节） | | create_time | DATETIME | 创建时间 | 对于 PDF 文件的在线预览，可借助第三方工具如 Mozilla PDF.js 或者集成云服务提供商的能力。 --- #### 消息队列优化方案 为了提高系统的并发性能，在高负载场景下可以引入消息队列技术。例如，当接收到大量文件上传请求时，先将其放入 RabbitMQ 或 Kafka 队列中排队等待处理[^2]。这样不仅可以缓解瞬时压力，还能更好地控制资源分配。 --- ### 总结 以上展示了如何利用 Ruoyi-Vue-Pro 架构快速搭建一套完整的文件上传解决方案，涵盖了前端交互界面的设计思路、后端业务逻辑编写要点以及可能扩展的方向等内容。