若依框架集成阿里云OSS

OSS 集成

若依代码仓库

1. 问题分析

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

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

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

2. 依赖导入

1. 在父工程中引入依赖

   <properties>
     <aliyun.sdk.oss>3.17.4aliyun.sdk.oss>
     <hutool-all.version>5.8.10hutool-all.version>
   properties>
   
   
   <dependencyManagement>
     <dependencies>
       
       <dependency>
         <groupId>com.aliyun.ossgroupId>
         <artifactId>aliyun-sdk-ossartifactId>
         <version>${aliyun.sdk.oss}version>
       dependency>
       
       <dependency>
         <groupId>com.zzylgroupId>
         <artifactId>zzyl-ossartifactId>
         <version>${zzyl.version}version>
       dependency>
       
       <dependency>
         <groupId>cn.hutoolgroupId>
         <artifactId>hutool-allartifactId>
         <version>${hutool-all.version}version>
       dependency>
     dependencies>
   dependencyManagement>
   

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

   
   <dependency>
     <groupId>cn.hutoolgroupId>
     <artifactId>hutool-allartifactId>
   dependency>
   

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

   <dependency>
     <groupId>com.zzylgroupId>
     <artifactId>zzyl-ossartifactId>
   dependency>
   

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

3. 新建模块

创建新的子模块 zzyl-oss

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

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

2. 引入依赖

   <dependencies>
     <dependency>
       <groupId>com.aliyun.ossgroupId>
       <artifactId>aliyun-sdk-ossartifactId>
     dependency>
   
     <dependency>
       <groupId>com.zzylgroupId>
       <artifactId>zzyl-commonartifactId>
     dependency>
   dependencies>
   

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

在 OSS 模块中创建两个类：

1. AliyunOSSProperties：配置类，读取 aliyun.oss 为前缀的属性值（桶名称，域名站点）
2. 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 });