Integrating MinIO Object Storage with Spring Boot and Vue: Docker Setup, API, and Frontend Upload

MinIO is a high‑performance object storage service released under the AGPL‑v3 license and compatible with Amazon S3, making it suitable for machine‑learning, analytics, and application data workloads.

Docker deployment – Run a single‑node MinIO container on Linux/macOS:

docker run -p 9000:9000 \
  --name minio1 \
  -v /mnt/data:/data \
  -e "MINIO_ROOT_USER=AKIAIOSFODNN7EXAMPLE" \
  -e "MINIO_ROOT_PASSWORD=wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY" \
  minio/minio server /data

On Windows replace the volume path with D:\data:/data while keeping the same environment variables.

Spring Boot integration – Add the following Maven dependencies:

<!-- thymeleaf template engine -->
<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

<!-- MinIO Java client -->
<dependency>
  <groupId>io.minio</groupId>
  <artifactId>minio</artifactId>
  <version>8.2.1</version>
</dependency>

<!-- Lombok (optional) -->
<dependency>
  <groupId>org.projectlombok</groupId>
  <artifactId>lombok</artifactId>
  <optional>true</optional>
</dependency>

Configure MinIO properties in application.yml:

spring:
  servlet:
    multipart:
      max-file-size: 10MB
      max-request-size: 10MB
  minio:
    access-key: AKIAIOSFODNN7EXAMPLE
    secret-key: wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY
    url: http://localhost:9000
    bucket-name: wdhcr
  thymeleaf:
    cache: false

MinIO configuration class creates a MinioClient bean using the bound properties:

@Configuration
@ConfigurationProperties(prefix = "spring.minio")
@Data
public class MinioConfiguration {
    private String accessKey;
    private String secretKey;
    private String url;
    private String bucketName;

    @Bean
    public MinioClient minioClient() {
        return MinioClient.builder()
                .endpoint(url)
                .credentials(accessKey, secretKey)
                .build();
    }
}

Reusable MinIO component provides methods for generating signed POST policies, obtaining presigned URLs, uploading files, and retrieving temporary download links. Each method catches MinIO‑specific exceptions and returns either the result or null on failure.

@Component
public class MinioComp {
    @Autowired
    private MinioClient minioClient;
    @Autowired
    private MinioConfiguration configuration;

    public Map getPolicy(String fileName, ZonedDateTime time) { /* … */ }
    public String getPolicyUrl(String objectName, Method method, int time, TimeUnit unit) { /* … */ }
    public void upload(MultipartFile file, String fileName) { /* … */ }
    public String getUrl(String objectName, int time, TimeUnit unit) { /* … */ }
}

Frontend implementation – A Vue page using Element‑UI demonstrates three upload approaches (traditional form submit, direct form‑data POST, and presigned URL PUT). The script defines methods that request a signed policy from the backend, perform the upload with axios, and then fetch the file URL to display the image.

new Vue({
  el: '#app',
  data: function() {
    return { imgUrl: '', directUrl: '', uploadUrl: '' };
  },
  methods: {
    uploadHandle(options) { /* traditional upload */ },
    getpolicy(file) { /* fetch policy and POST */ },
    getUploadUrl(file) { /* fetch presigned PUT URL and upload */ },
    axiosPost(method, url, data, config) { /* wrapper around axios */ }
  }
});

The page shows the uploaded image after each method, allowing the reader to compare the different techniques.

All source code and a runnable project are available at https://gitee.com/jack_whh/minio-upload .