内部网站建设公司千锋教育学费多少
OSS 集成
若依代码仓库
1. 问题分析
在若依框架目前的实现中，是把图片存储到了服务器本地的目录，通过服务进行访问，这样做存储的是比较省事，但是缺点也有很多：
- 硬件与网络要求：服务器通常需要高性能的硬件和稳定的网络环境，以保证文件传输的效率和稳定性。这可能会增加硬件和网络资源的成本和维护难度。
- 管理难度：服务器目录需要管理员进行配置和管理，包括权限设置、备份策略等。如果管理不善或配置不当，可能会引发一些安全问题和性能问题。
- 性能瓶颈：如果服务器处理能力不足或网络带宽不够，可能会导致性能瓶颈，影响文件上传、下载和访问的速度。
- 单点故障风险：服务器故障可能导致所有存储在其上的文件无法访问，尽管可以通过备份和冗余措施来降低这种风险，但单点故障的风险仍然存在。
基于以上原因，企业中很多的文件都会存储到 OSS 中，OSS 可以解决以上所有的问题，并且成本也不高，下面我们就把阿里的 OSS 集成到若依项目中。
2. 依赖导入
-
在父工程中引入依赖
<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> -
在 zzyl-common 模块中导入依赖
<!-- hutool工具包 --> <dependency><groupId>cn.hutool</groupId><artifactId>hutool-all</artifactId> </dependency> -
在 zzyl-admin 模块中导入依赖
<dependency><groupId>com.zzyl</groupId><artifactId>zzyl-oss</artifactId> </dependency>
在导入依赖操作时，不要着急依赖刷新，由于 OSS 模块并没有创建，肯定会报错！！！
3. 新建模块
创建新的子模块 zzyl-oss
-
删除如下内容，如果本来就没有，就不用操作
<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> -
引入依赖
<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 模块中创建两个类：
- AliyunOSSProperties：配置类，读取 aliyun.oss 为前缀的属性值（桶名称，域名站点）
- 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 });