springboot+thymeleaf整合阿里云OOS对象存储图片的实现

下面是“springboot+thymeleaf整合阿里云OOS对象存储图片的实现”的完整攻略。

简介

在项目中，我们经常需要处理图片等文件的上传和展示，使用阿里云OOS对象存储服务可以实现文件的高可用、高并发和高扩展性，同时可以帮助我们节省服务器的存储空间和带宽成本。这篇文章将介绍如何在springboot项目中使用thymeleaf模板引擎展示阿里云OOS对象存储的图片。

准备工作

1. 阿里云OOS对象存储服务账号。如果您还没有阿里云账号，可以前往阿里云官网注册账号。
2. 创建一个OOS Bucket。前往OOS控制台，创建一个Bucket并记录下Bucket名称。
3. 为Bucket添加一个公共读权限。在Bucket的权限设置中，添加一个公共读权限，以便我们能够通过URL访问到文件。

配置pom.xml文件

在项目的pom.xml中，添加aliyun-java-sdk和commons-io依赖：

<!-- 阿里云OOS SDK依赖 -->
<dependency>
    <groupId>com.aliyun.oss</groupId>
    <artifactId>aliyun-sdk-oss</artifactId>
    <version>3.10.2</version>
</dependency>
<!-- commons-io依赖 -->
<dependency>
    <groupId>commons-io</groupId>
    <artifactId>commons-io</artifactId>
    <version>2.8.0</version>
</dependency>

配置application.yml文件

在application.yml文件中，添加阿里云OOS访问信息和Bucket信息：

aliyun:
  oos:
    access-key-id: your-access-key-id
    access-key-secret: your-access-key-secret
    endpoint: your-endpoint
    bucket-name: your-bucket-name

其中，access-key-id和access-key-secret是阿里云OOS服务的Access Key ID和Access Key Secret，endpoint是OOS服务的Endpoint地址，bucket-name是创建的Bucket名称。

定义OSS服务配置类

创建OssService类，并使用@Autowired注解将其注入到其他需要使用OSS服务的类中。

@Service
public class OssService {
    @Autowired
    private Environment env;

    private String accessKeyId;
    private String accessKeySecret;
    private String endpoint;
    private String bucketName;

    private OSS ossClient;

    @PostConstruct
    public void init() {
        accessKeyId = env.getProperty("aliyun.oos.access-key-id");
        accessKeySecret = env.getProperty("aliyun.oos.access-key-secret");
        endpoint = env.getProperty("aliyun.oos.endpoint");
        bucketName = env.getProperty("aliyun.oos.bucket-name");

        ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);
    }

    public String uploadFile(InputStream inputStream, String fileName) throws IOException {
        // 上传文件至OSS
        ossClient.putObject(bucketName, fileName, inputStream);

        // 获取文件URL
        Date expiration = new Date(System.currentTimeMillis() + 3600 * 1000 * 24 * 365); // 一年有效期
        String url = ossClient.generatePresignedUrl(bucketName, fileName, expiration).toString();

        return url;
    }

    public void deleteFile(String fileName) {
        // 删除OSS上的文件
        ossClient.deleteObject(bucketName, fileName);
    }
}

其中，init()方法用于初始化OSS客户端，uploadFile()方法用于将文件上传至OSS并返回文件URL，deleteFile()方法用于删除OSS上的文件。

控制器层使用OSS服务

在控制器中，使用OssService.uploadFile()方法上传文件，并将返回的URL保存到Model中。

@Controller
public class HomeController {
    @Autowired
    private OssService ossService;

    @RequestMapping("/")
    public String index(Model model) throws IOException {
        // 上传图片并获取URL
        InputStream inputStream = getClass().getClassLoader().getResourceAsStream("static/images/avatar.png");
        String fileName = "images/avatar.png";
        String url = ossService.uploadFile(inputStream, fileName);

        // 将URL保存到Model中
        model.addAttribute("avatarUrl", url);

        return "index";
    }
}

使用thymeleaf展示图片

在thymeleaf模板中，使用th:src指令引用图片URL。

<img th:src="${avatarUrl}" />

示例一：上传本地图片

在项目中找到本地的图片文件，然后将其上传至阿里云OOS，并使用 thymeleaf 模板展示。

@Controller
public class HomeController {
    @Autowired
    private OssService ossService;

    @RequestMapping("/")
    public String index(Model model) throws IOException {
        // 上传本地图片并获取URL
        File file = new File("path/to/local/image.jpg");
        InputStream inputStream = new FileInputStream(file);
        String fileName = "images/image.jpg";
        String url = ossService.uploadFile(inputStream, fileName);

        // 将URL保存到Model中
        model.addAttribute("imageUrl", url);

        return "index";
    }
}

在 thymeleaf 模板中展示图片：

<img th:src="${imageUrl}" />

示例二：使用multipart/form-data上传文件

在前端页面中，使用form表单将文件上传至服务端，然后将文件上传至阿里云OOS，并使用 thymeleaf 模板展示。

@Controller
public class HomeController {
    @Autowired
    private OssService ossService;

    @RequestMapping(value = "/upload", method = RequestMethod.POST)
    public String uploadFile(@RequestParam("file") MultipartFile file, Model model) throws IOException {
        // 上传文件至OSS并获取URL
        InputStream inputStream = file.getInputStream();
        String fileName = "images/" + file.getOriginalFilename();
        String url = ossService.uploadFile(inputStream, fileName);

        // 将URL保存到Model中
        model.addAttribute("fileUrl", url);

        return "success";
    }

    @RequestMapping("/upload")
    public String uploadForm() {
        return "upload";
    }
}

在thymeleaf模板中，将文件上传表单展示出来：

<form th:action="@{/upload}" th:object="${file}" method="post" enctype="multipart/form-data">
  <input type="file" name="file" />
  <button type="submit">上传文件</button>
</form>

展示上传的文件：

<img th:src="${fileUrl}" />

总结

本文主要介绍了如何在springboot项目中使用thymeleaf模板引擎展示阿里云OOS对象存储的图片。需要注意的是，使用阿里云OOS服务需要在配置时保证Access Key ID、Access Key Secret和Bucket权限设置的正确性。在开发过程中，可以根据实际需求使用示例一和示例二进行开发，希望能够帮助到读者。