当前位置： 首页 > backend >正文

若依前后端分离Vue3版本接入阿里云OSS

backend 2025/7/13 8:26:03

一、引入依赖

首先在commom 模块的pom 下面引入 阿里云OSS 的 依赖

        <!--     阿里云oss     --><dependency><groupId>com.aliyun.oss</groupId><artifactId>aliyun-sdk-oss</artifactId><version>3.17.4</version></dependency>

二、安装x-file-store

一行代码将文件存储到本地、FTP、SFTP、WebDAV、阿里云 OSS、华为云 OBS、七牛云 等各个厂商。

<dependency><groupId>org.dromara.x-file-storage</groupId><artifactId>x-file-storage-spring</artifactId><version>2.3.0</version>
</dependency>

三、applacation.yml 添加相关配置

记得将  access-key 换成自己的

dromara:x-file-storage: #文件存储配置default-platform: aliyun-oss-1 #默认使用的存储平台thumbnail-suffix: ".min.jpg" #缩略图后缀，例如【.min.jpg】【.png】#对应平台的配置写在这里，注意缩进要对齐aliyun-oss:- platform: aliyun-oss-1 # 存储平台标识enable-storage: true  # 启用存储access-key: ??secret-key: ??end-point: ??bucket-name: ??domain: ?? # 访问域名，注意“/”结尾，例如：https://abc.oss-cn-shanghai.aliyuncs.com/base-path: test/ # 基础路径

然后再启动类上方添加    @EnableFileStorage 注解

@EnableFileStorage
@SpringBootApplication
public class SpringFileStorageTestApplication {public static void main(String[] args) {SpringApplication.run(SpringFileStorageTestApplication.class,args);}}

四、后端改造 

需要改造 admin模块下的  controller/common/CommonController.java

建议直接新项目直接复制代码使用

package com.soft.web.controller.common;import java.util.ArrayList;
import java.util.List;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;import org.dromara.x.file.storage.core.FileInfo;
import org.dromara.x.file.storage.core.FileStorageService;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.MediaType;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
import com.soft.common.config.RuoYiConfig;
import com.soft.common.constant.Constants;
import com.soft.common.core.domain.AjaxResult;
import com.soft.common.utils.StringUtils;
import com.soft.common.utils.file.FileUploadUtils;
import com.soft.common.utils.file.FileUtils;
import com.soft.framework.config.ServerConfig;/*** 通用请求处理* * @author ruoyi*/
@RestController
@RequestMapping("/common")
public class CommonController
{private static final Logger log = LoggerFactory.getLogger(CommonController.class);@Autowiredprivate ServerConfig serverConfig;@Autowiredprivate FileStorageService fileStorageService;//注入实列private static final String FILE_DELIMETER = ",";/*** 通用下载请求* * @param fileName 文件名称* @param delete 是否删除*/@GetMapping("/download")public void fileDownload(String fileName, Boolean delete, HttpServletResponse response, HttpServletRequest request){try{if (!FileUtils.checkAllowDownload(fileName)){throw new Exception(StringUtils.format("文件名称({})非法，不允许下载。 ", fileName));}String realFileName = System.currentTimeMillis() + fileName.substring(fileName.indexOf("_") + 1);String filePath = RuoYiConfig.getDownloadPath() + fileName;response.setContentType(MediaType.APPLICATION_OCTET_STREAM_VALUE);FileUtils.setAttachmentResponseHeader(response, realFileName);FileUtils.writeBytes(filePath, response.getOutputStream());if (delete){FileUtils.deleteFile(filePath);}}catch (Exception e){log.error("下载文件失败", e);}}/*** 通用上传请求（单个）*/@PostMapping("/upload")public AjaxResult uploadFile(MultipartFile file) throws Exception{try{//            // 上传文件路径
//            String filePath = RuoYiConfig.getUploadPath();
//            // 上传并返回新文件名称
//            String fileName = FileUploadUtils.upload(filePath, file);
//            String url = serverConfig.getUrl() + fileName;// 上传文件，返回信息FileInfo fileInfo = fileStorageService.of(file).upload();String fileName = fileInfo.getFilename();AjaxResult ajax = AjaxResult.success();ajax.put("url", fileInfo.getUrl());ajax.put("fileName", fileName);ajax.put("newFileName", FileUtils.getName(fileName));ajax.put("originalFilename", file.getOriginalFilename());return ajax;}catch (Exception e){return AjaxResult.error(e.getMessage());}}/*** 通用上传请求（多个）*/@PostMapping("/uploads")public AjaxResult uploadFiles(List<MultipartFile> files) throws Exception{try{// 上传文件路径String filePath = RuoYiConfig.getUploadPath();List<String> urls = new ArrayList<String>();List<String> fileNames = new ArrayList<String>();List<String> newFileNames = new ArrayList<String>();List<String> originalFilenames = new ArrayList<String>();for (MultipartFile file : files){// 上传并返回新文件名称String fileName = FileUploadUtils.upload(filePath, file);String url = serverConfig.getUrl() + fileName;urls.add(url);fileNames.add(fileName);newFileNames.add(FileUtils.getName(fileName));originalFilenames.add(file.getOriginalFilename());}AjaxResult ajax = AjaxResult.success();ajax.put("urls", StringUtils.join(urls, FILE_DELIMETER));ajax.put("fileNames", StringUtils.join(fileNames, FILE_DELIMETER));ajax.put("newFileNames", StringUtils.join(newFileNames, FILE_DELIMETER));ajax.put("originalFilenames", StringUtils.join(originalFilenames, FILE_DELIMETER));return ajax;}catch (Exception e){return AjaxResult.error(e.getMessage());}}/*** 本地资源通用下载*/@GetMapping("/download/resource")public void resourceDownload(String resource, HttpServletRequest request, HttpServletResponse response)throws Exception{try{if (!FileUtils.checkAllowDownload(resource)){throw new Exception(StringUtils.format("资源文件({})非法，不允许下载。 ", resource));}// 本地资源路径String localPath = RuoYiConfig.getProfile();// 数据库资源地址String downloadPath = localPath + StringUtils.substringAfter(resource, Constants.RESOURCE_PREFIX);// 下载名称String downloadName = StringUtils.substringAfterLast(downloadPath, "/");response.setContentType(MediaType.APPLICATION_OCTET_STREAM_VALUE);FileUtils.setAttachmentResponseHeader(response, downloadName);FileUtils.writeBytes(downloadPath, response.getOutputStream());}catch (Exception e){log.error("下载文件失败", e);}}
}

五、前端改造

1.改造 ImagePreview 组件

/src/components/ImagePreview/index.vue

改造 realSrc 的计算属性

const realSrc = computed(() => {if (!props.src) {return;}let real_src = props.src.split(",")[0];if (isExternal(real_src)) {return real_src;}if(real_src.includes("http")){return real_src;}return import.meta.env.VITE_APP_BASE_API + real_src;
});

2. 改造ImageUpload 组件

/src/components/ImageUpload/index.vue

修改监听器

watch(() => props.modelValue, val => {if (val) {// 首先将值转为数组const list = Array.isArray(val) ? val : props.modelValue.split(",");// 然后将数组转为对象数组fileList.value = list.map(item => {if (typeof item === "string") {if(item.includes('http')){item = { name: item, url: item };return item}if (item.indexOf(baseUrl) === -1) {item = { name: baseUrl + item, url: baseUrl + item };} else {item = { name: item, url: item };}}return item;});} else {fileList.value = [];return [];}
},{ deep: true, immediate: true });

最后整个整个项目的改造接入就完成啦

http://www.xdnf.cn/news/15261.html

相关文章：

  • 20250712-1-Kubernetes 监控与日志管理-K8s日志管理与维护_笔记
  • Softmax回归（多类逻辑回归）原理及完整代码示例实现
  • 一个基于数据库的分布式锁：乐观与悲观实现
  • 贪心算法题解——跳跃游戏【LeetCode】
  • Windows 用户账户控制（UAC）绕过漏洞
  • python学习笔记【1】对字符串的处理
  • 《Java Web程序设计》实验报告六 JSP+JDBC+MySQL实现登录注册
  • [vroom] 启发式算法(路径评估) | 局部搜索优化引擎 | 解决方案输出解析
  • 自助KTV选址指南与优化策略
  • 系统分析师-计算机系统-输入输出系统
  • 十三、K8s自定义资源Operator
  • 仅27M参数！SamOutVX轻量级语言模型刷新认知，小身材也有大智慧
  • 2025.7.12总结
  • Vue 项目打包部署还存在问题？你知道怎么做吧？
  • JVM回收
  • 内部类 示例
  • 【java安全】springBoot配置文件属性名自定义及属性值加密
  • 【6.1.0 漫画数据库技术选型】
  • 建造者模式（Builder）
  • 【Datawhale AI 夏令营】 用AI做带货视频评论分析（二）
  • 微服务环境下的灰度发布与金丝雀发布实战经验分享
  • 【电脑】硬盘驱动器（HDD）的基础知识
  • 消息认证码（message authentication code）MAC
  • skywalking镜像应用springboot的例子
  • 【设计模式】单例模式 饿汉式单例与懒汉式单例
  • jenkins自动化部署前端vue+docker项目
  • 并发--Callable vs Runnable
  • 代码随想录算法训练营第三十二天|LeetCode 509 斐波那契数，LeetCode 70 爬楼梯，LeetCode 746 使用最小花费爬楼梯
  • 笔记-分布式计算基础
  • 云计算三大服务模式深度解析：IaaS、PaaS、SaaS