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

若依框架集成阿里云OSS

article 2025/2/28 1:29:07

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_DOMAIN
    endpoint: YOUR_ENDPOINT
    bucket-name: YOUR_BUCKET_NAME
    region: YOUR_REGION
    accessKeyId: YOUR_ACCESS_KEY
    secretAccessKey: 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 });