汽车行业网站建设方案达州市住房和建设厅网站

OSS 集成

若依代码仓库

1. 问题分析

在若依框架目前的实现中，是把图片存储到了服务器本地的目录，通过服务进行访问，这样做存储的是比较省事，但是缺点也有很多：

• 硬件与网络要求：服务器通常需要高性能的硬件和稳定的网络环境，以保证文件传输的效率和稳定性。这可能会增加硬件和网络资源的成本和维护难度。
• 管理难度：服务器目录需要管理员进行配置和管理，包括权限设置、备份策略等。如果管理不善或配置不当，可能会引发一些安全问题和性能问题。
• 性能瓶颈：如果服务器处理能力不足或网络带宽不够，可能会导致性能瓶颈，影响文件上传、下载和访问的速度。
• 单点故障风险：服务器故障可能导致所有存储在其上的文件无法访问，尽管可以通过备份和冗余措施来降低这种风险，但单点故障的风险仍然存在。

基于以上原因，企业中很多的文件都会存储到 OSS 中，OSS 可以解决以上所有的问题，并且成本也不高，下面我们就把阿里的 OSS 集成到若依项目中。

2. 依赖导入

1. 在父工程中引入依赖

   <properties><aliyun.sdk.oss>3.17.4</aliyun.sdk.oss><hutool-all.version>5.8.10</hutool-all.version>
   </properties><!-- 依赖声明 -->
   <dependencyManagement><dependencies><!-- 其他依赖省略... --><dependency><groupId>com.aliyun.oss</groupId><artifactId>aliyun-sdk-oss</artifactId><version>${aliyun.sdk.oss}</version></dependency><!-- OSS 模块 --><dependency><groupId>com.zzyl</groupId><artifactId>zzyl-oss</artifactId><version>${zzyl.version}</version></dependency><!-- hutool工具包 --><dependency><groupId>cn.hutool</groupId><artifactId>hutool-all</artifactId><version>${hutool-all.version}</version></dependency></dependencies>
   </dependencyManagement>
   

2. 在 zzyl-common 模块中导入依赖

   <!-- hutool工具包 -->
   <dependency><groupId>cn.hutool</groupId><artifactId>hutool-all</artifactId>
   </dependency>
   

3. 在 zzyl-admin 模块中导入依赖

   <dependency><groupId>com.zzyl</groupId><artifactId>zzyl-oss</artifactId>
   </dependency>
   

在导入依赖操作时，不要着急依赖刷新，由于 OSS 模块并没有创建，肯定会报错！！！

3. 新建模块

创建新的子模块 zzyl-oss

1. 删除如下内容，如果本来就没有，就不用操作

   <properties><maven.compiler.source>17/11</maven.compiler.source><maven.compiler.target>17/11</maven.compiler.target><project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
   </properties>
   

2. 引入依赖

   <dependencies><dependency><groupId>com.aliyun.oss</groupId><artifactId>aliyun-sdk-oss</artifactId></dependency><dependency><groupId>com.zzyl</groupId><artifactId>zzyl-common</artifactId></dependency>
   </dependencies>
   

4. 创建 oss 配置类及客户端

在 OSS 模块中创建两个类：

1. AliyunOSSProperties：配置类，读取 aliyun.oss 为前缀的属性值（桶名称，域名站点）
2. AliyunOSSOperator：通过 OSSClient 对 OSS 进行交互，提供了上传和删除两个方法

阿里云OSS模块，配置及文件上传/删除类

5. 修改 admin 模块中的配置文件

# 阿里云OSS相关配置
aliyun:oss:domain: YOUR_DOMAINendpoint: YOUR_ENDPOINTbucket-name: YOUR_BUCKET_NAMEregion: YOUR_REGIONaccessKeyId: YOUR_ACCESS_KEYsecretAccessKey: YOUR_SECRET_ACCESS_KEY

切记将数据切换为自己对应的参数

6. 后端代码修改

在 admin 模块中的 com.***.web.controller.common.CommonController 类，修改单个文件上传方法

//通用上传请求（单个）
@PostMapping("/upload")
public AjaxResult uploadFile(MultipartFile file) throws Exception {try {// 修改后的代码String url = aliyunOssUtils.uploadFile(file);AjaxResult ajax = AjaxResult.success();ajax.put("url", url);ajax.put("fileName", url);ajax.put("newFileName", FileUtils.getName(url));ajax.put("originalFilename", file.getOriginalFilename());return ajax;}catch (Exception e) { return AjaxResult.error(e.getMessage()); }
}

7. 前端代码修改

由于之前的图片访问是本地的路径和服务，需要向后端发起请求才能获取图片，现在我们使用了 OSS，图片可以直接通过互联网访问，无需再次访问后端服务，所以需要修改前端的图片访问逻辑

• 修改文件位置：src/components/imageUpload/index.vue
• 如果图片路径是以 http 开头的，则不走后台服务访问，直接访问 OSS，之前的不变

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.startsWith("http") === -1) {item = { name: baseUrl + item, url: baseUrl + item };} else {item = { name: item, url: item };}}return item;});} else {fileList.value = [];return [];}
},{ deep: true, immediate: true });