ruoyi-vue-plus文件上传，腾讯云

在 RuoYi-Vue-Plus 项目中实现文件上传功能并对接腾讯云对象存储（COS）服务，涉及前后端配置、依赖引入和代码调整。以下是详细的实现步骤： ### 后端配置 1. **添加依赖** 在 `pom.xml` 文件中添加腾讯云 COS SDK 的 Maven 依赖： ```xml <dependency> <groupId>com.qcloud</groupId> <artifactId>cos_api</artifactId> <version>5.6.83</version> </dependency> ``` 2. **配置 COS 参数** 在 `application.yml` 中添加腾讯云 COS 的相关配置： ```yaml # 腾讯云 COS 配置 cos: secret-id: your-secret-id secret-key: your-secret-key region: ap-beijing bucket-name: your-bucket-name upload-path: /upload/ ``` - `secret-id` 和 `secret-key` 是腾讯云 API 访问的凭证。 - `region` 表示 COS 存储桶所在的区域。 - `bucket-name` 是存储桶名称。 - `upload-path` 表示上传路径前缀。 3. **创建 COS 工具类** 创建一个工具类用于处理与 COS 的交互，例如上传和下载操作： ```java import com.qcloud.cos.COSClient; import com.qcloud.cos.auth.BasicCOSCredentials; import com.qcloud.cos.auth.COSCredentials; import com.qcloud.cos.region.Region; import org.springframework.beans.factory.annotation.Value; import org.springframework.stereotype.Component; @Component public class CosUtil { @Value("${cos.secret-id}") private String secretId; @Value("${cos.secret-key}") private String secretKey; @Value("${cos.region}") private String region; public COSClient getCosClient() { COSCredentials cred = new BasicCOSCredentials(secretId, secretKey); return new COSClient(cred, new Region(region)); } } ``` 4. **编写文件上传接口** 在控制器中编写文件上传接口，并调用 COS SDK 实现文件上传逻辑： ```java import com.qcloud.cos.model.PutObjectRequest; import com.qcloud.cos.model.COSObjectId; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.beans.factory.annotation.Value; import org.springframework.web.bind.annotation.PostMapping; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.bind.annotation.RestController; import org.springframework.web.multipart.MultipartFile; import java.io.File; import java.io.FileOutputStream; import java.io.IOException; @RestController public class FileUploadController { @Autowired private CosUtil cosUtil; @Value("${cos.bucket-name}") private String bucketName; @Value("${cos.upload-path}") private String uploadPath; @PostMapping("/upload") public String uploadFile(@RequestParam("file") MultipartFile file) throws IOException { if (file.isEmpty()) { return "文件为空"; } // 将 MultipartFile 转换为临时文件 File tempFile = File.createTempFile("upload-", ".tmp"); try (FileOutputStream fos = new FileOutputStream(tempFile)) { fos.write(file.getBytes()); } // 上传到 COS PutObjectRequest request = new PutObjectRequest(bucketName, uploadPath + file.getOriginalFilename(), tempFile); COSObjectId cosObjectId = cosUtil.getCosClient().putObject(request); // 返回访问 URL return "https://your-bucket-name.cos.ap-beijing.myqcloud.com" + uploadPath + file.getOriginalFilename(); } } ``` ### 前端配置 1. **修改上传组件** 在 Vue 前端使用 `el-upload` 组件实现文件上传功能： ```vue <template> <el-upload action="/api/upload" :on-success="handleSuccess" :before-upload="beforeUpload" :limit="1"> <el-button type="primary">点击上传</el-button> </el-upload> </template> <script> export default { methods: { beforeUpload(file) { const isValidType = file.type === 'image/jpeg' || file.type === 'image/png'; if (!isValidType) { this.$message.error('只能上传 JPG/PNG 格式图片!'); } return isValidType; }, handleSuccess(response) { this.$message.success('上传成功'); console.log('文件地址:', response); } } }; </script> ``` 2. **配置代理** 在开发环境中通过代理解决跨域问题，在 `vue.config.js` 中添加如下配置： ```js module.exports = { devServer: { proxy: { '/api': { target: 'http://localhost:8080', changeOrigin: true, pathRewrite: { '^/api': '' } } } } }; ``` ### 注意事项 - 确保腾讯云 COS 的权限策略允许上传操作。 - 对于生产环境，建议将临时文件处理优化为直接上传流的方式以减少服务器资源消耗[^1]。 - 使用 HTTPS 协议确保数据传输的安全性。 - 可根据需求扩展文件类型限制、大小校验等功能。