### 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 架构快速搭建一套完整的
文件上传解决方案，涵盖了前端交互界面的设计
思路、后端业务逻辑编写要点以及可能扩展的方向等内容。
表单与二进制数据处理
扫一扫
2586
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
