阿里云oss + 若依 完成图片的上传和回显

前言

1、记录下在使用若依框架完成企业图片的上传和回显的问题
2、使用的是阿里云的oss 和 x file storage

阿里云准备

1、注册并搜索

• 完成注册 阿里云注册地址
• 搜索“oss”
  
  

2、产品及使用

3、创建Bucket桶

（创建成功后需要编辑，将阻止公共访问的权限打开，然后设置为“公共读”。不然公共网络无法访问）

4、 阿里云与若依系统的身份验证 - 开通密钥

（不要泄密哦）

5、 完成配置

• 以管理员的身份打开cmd命令行
• 执行配置命令

  set OSS_ACCESS_KEY_ID=你的id
  set OSS_ACCESS_KEY_SECRET=你的密码
  
  然后执行：
  setx OSS_ACCESS_KEY_ID "%OSS_ACCESS_KEY_ID%"
  setx OSS_ACCESS_KEY_SECRET "%OSS_ACCESS_KEY_SECRET%"
  

• 验证是否生效

  echo %OSS_ACCESS_KEY_ID%
  echo %OSS_ACCESS_KEY_SECRET%
  

• 示例结果
  
• 重启idea 重启idea 重启idea

按照sdk进行代码编写

后边我们会用x file storage，这个的依赖需要引入，其他的可以自行测试看看

1、查看sdk并添加配置

• 添加依赖

  添加到若依的common的依赖中

  <dependency>
      <groupId>com.aliyun.oss</groupId>
      <artifactId>aliyun-sdk-oss</artifactId>
      <version>3.17.4</version>
  </dependency>
  

• 导入后检查
  
• 配置访问凭证

  ① java程序去连接阿里云的接口时的身份的认证
  ②【阿里云准备】的第5步已经配置了，这里直接跳过就行

2、产看endpoint

5、代码测试及查看结果

• 测试代码

  public class Demo {
      public static void main(String[] args) throws Exception {
          // Endpoint以华东1（杭州）为例，其它Region请按实际情况填写。
          //---------------【更改这里】----------------------
          String endpoint = "https://oss-cn-beijing.aliyuncs.com";
          // 从环境变量中获取访问凭证。运行本代码示例之前，请确保已设置环境变量OSS_ACCESS_KEY_ID和OSS_ACCESS_KEY_SECRET。
          EnvironmentVariableCredentialsProvider credentialsProvider = CredentialsProviderFactory.newEnvironmentVariableCredentialsProvider();
          // 填写Bucket名称，例如examplebucket。
          //---------------【更改这里】----------------------
          String bucketName = "ruoyi-employment";
          // 填写Object完整路径，完整路径中不能包含Bucket名称，例如exampledir/exampleobject.txt。
          //---------------【更改这里】存到oss上的名称----------------------
          String objectName = "ali.png";
          // 填写本地文件的完整路径，例如D:\\localpath\\examplefile.txt。
          // 如果未指定本地路径，则默认从示例程序所属项目对应本地路径中上传文件流。
          //---------------【更改这里】找一个本地的图片----------------------
          String filePath= "C:\\Users\\Administrator\\Pictures\\ali.jpg";
          // 填写Bucket所在地域。以华东1（杭州）为例，Region填写为cn-hangzhou。
          String region = "cn-beijing";
          // 创建OSSClient实例。
          ClientBuilderConfiguration clientBuilderConfiguration = new ClientBuilderConfiguration();
          clientBuilderConfiguration.setSignatureVersion(SignVersion.V4);
          OSS ossClient = OSSClientBuilder.create()
                  .endpoint(endpoint)
                  .credentialsProvider(credentialsProvider)
                  .clientConfiguration(clientBuilderConfiguration)
                  .region(region)
                  .build();
          try {
              InputStream inputStream = new FileInputStream(filePath);
              // 创建PutObjectRequest对象。
              PutObjectRequest putObjectRequest = new PutObjectRequest(bucketName, objectName, inputStream);
              // 创建PutObject请求。
              PutObjectResult result = ossClient.putObject(putObjectRequest);
          } catch (OSSException oe) {
              System.out.println("Caught an OSSException, which means your request made it to OSS, "
                      + "but was rejected with an error response for some reason.");
              System.out.println("Error Message:" + oe.getErrorMessage());
              System.out.println("Error Code:" + oe.getErrorCode());
              System.out.println("Request ID:" + oe.getRequestId());
              System.out.println("Host ID:" + oe.getHostId());
          } catch (ClientException ce) {
              System.out.println("Caught an ClientException, which means the client encountered "
                      + "a serious internal problem while trying to communicate with OSS, "
                      + "such as not being able to access the network.");
              System.out.println("Error Message:" + ce.getMessage());
          } finally {
              if (ossClient != null) {
                  ossClient.shutdown();
              }
          }
      }
  } 
  

• 上传成功的检查
  

X File Storage的使用

点击跳转 → X Spring File Storage官网

为什么使用 X File Storage

企业上无论是存储在阿里云还是华为云，X File Storage都可以帮你管理
即一行代码可以实现各个平台的存储

使用方法

• 引入【X File Storage】 和 所存储的云平台的依赖（这里我们使用阿里云）

  <dependency>
      <groupId>org.dromara.x-file-storage</groupId>
      <artifactId>x-file-storage-spring</artifactId>
      <version>2.2.1</version>
  </dependency>
  
  <dependency>
      <groupId>com.aliyun.oss</groupId>
      <artifactId>aliyun-sdk-oss</artifactId>
      <version>3.16.1</version>
  </dependency>
  

• 在application.yml文件中添加配置

  dromara:
    x-file-storage: #文件存储配置
      default-platform: huawei-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/ # 基础路径
  

  

• 启动类，添加注解
  

修改若依后端代码

找到common/upload地址

在ruoyi-admin下的web/controller/common/CommonController中

• 添加注解

      @Autowired
      private FileStorageService fileStorageService;
  

• 修改方法

  @PostMapping("/upload")
      public AjaxResult uploadFile(MultipartFile file) throws Exception
      {
          try
          {
              // 指定oss保存文件路径：employment/2025/03/15+文件名
              String objectName = LocalDate.now().format(DateTimeFormatter.ofPattern("yyyy/MM/dd"))+"/";
              System.err.println("-----"+objectName);
              // 上传图片并且返回文件信息
              FileInfo fileInfo = fileStorageService.of(file)
                      .setPath(objectName)
                      .upload();
              AjaxResult ajax = AjaxResult.success();
              ajax.put("url", fileInfo.getUrl());
              // 注意：这里的值需要以为url，因为前端的访问地址会做一个判断，如果以http开头的直接显示
              ajax.put("fileName", fileInfo.getUrl());
              ajax.put("newFileName", fileInfo.getUrl());
              ajax.put("originalFilename", file.getOriginalFilename());
              return ajax;
          }
          catch (Exception e)
          {
              return AjaxResult.error(e.getMessage());
          }
      }
  

• 前端部分

  • 展示部分：

    <el-form-item label="公司LOGO" prop="enterprise_logo">
      <image-upload 
      v-model="form.enterpriseLogo"
      :limit="1" 
      :on-remove="handleRemoveLogo" 
      :on-success="handleUploadSuccessLogo"
      :before-upload="beforeAvatarUpload"
      />
    </el-form-item>
    

  • script部分：

    const handleRemoveLogo = (file, fileList) => {
      console.log(file, fileList);
      form.enterpriseLogo = '';
    }
    
    const handleUploadSuccessLogo = async (file, fileList) => {
      try{
        const formData = new FormData();
        formData.append('file', file);
        const response = await axios.post('/common/upload', formData, {
          headers: {
            'Content-Type': 'multipart/form-data',
            ...this.upload.headers
          }
        });
        form.enterpriseLogo = response.data.url;
      }catch{
        ElMessage.error('上传失败，请稍后重试')
      }
    }
    
    const beforeAvatarUpload = (file) => {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;
    
      if (!isJPG) {
        ElMessage.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        ElMessage.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    }
    

• 因为图片是从oss上起来的，所以我们需要修改“image-upload”的内容
  
  修改为：
  

结束语

所有涉及的内容都写在上边了，希望能帮到大家吧