使用 Vue3、TypeScript 和 Spring Boot 实现文件上传至 MinIO 和 OSS

目录

《使用 Vue3、TypeScript 和 Spring Boot 实现文件上传至 MinIO 和 OSS》

一、技术选型

二、环境搭建

三、前端实现

四、后端实现

五、代码解析

在现代 web 应用开发中，文件上传是一个常见的需求。本文将介绍如何使用 Vue3、TypeScript 和 Spring Boot 实现文件上传功能，并将文件上传至 MinIO 和 OSS（Object Storage Service，对象存储服务）。

一、技术选型

1. 前端：Vue3 和 TypeScript 提供了强大的前端开发框架，具有高效的组件化开发模式和良好的类型安全。
2. 后端：Spring Boot 是一个流行的 Java 开发框架，简化了企业级应用的开发过程。
3. 对象存储：MinIO 和 OSS 是两种常用的对象存储服务，提供了可靠的存储和高可用性。

二、环境搭建

1. 安装 Vue CLI：使用 npm 安装 Vue CLI，这是一个用于快速搭建 Vue 项目的工具。

   npm install -g @vue/cli

1. 创建 Vue 项目：使用 Vue CLI 创建一个 Vue3 和 TypeScript 项目。

   vue create my-project --preset vue-next-typescript

1. 安装依赖：在 Vue 项目中，安装所需的依赖，如 axios 用于发送 HTTP 请求。

   npm install axios

1. 安装 Spring Boot：如果还没有安装 Spring Boot，可以通过 Maven 或 Gradle 构建工具创建一个 Spring Boot 项目。
2. 添加依赖：在 Spring Boot 项目中，添加所需的依赖，如 MinIO 和 OSS 的客户端库。

三、前端实现

1. 创建上传组件：在 Vue 项目中，创建一个文件上传组件。可以使用input元素的type="file"属性来选择文件。

   <template>
     <div>
       <input type="file" @change="onFileChange">
     </div>
   </template>

   <script lang="ts">
   import { defineComponent } from 'vue';
   import axios from 'axios';

   export default defineComponent({
     methods: {
       onFileChange(event: any) {
         const file = event.target.files[0];
         if (file) {
           this.uploadFile(file);
         }
       },
       async uploadFile(file: File) {
         const formData = new FormData();
         formData.append('file', file);
         try {
           const response = await axios.post('/upload', formData, {
             headers: {
               'Content-Type': 'multipart/form-data'
             }
           });
           console.log(response.data);
         } catch (error) {
           console.error(error);
         }
       }
     }
   });
   </script>

1. 发送上传请求：使用 axios 发送文件上传请求到后端接口。在请求头中设置Content-Type为multipart/form-data，表示上传的是文件数据。

四、后端实现

1. 配置 MinIO 和 OSS：在 Spring Boot 项目中，配置 MinIO 和 OSS 的连接信息，如访问密钥、秘密密钥、端点等。

   import io.minio.MinioClient;
   import org.springframework.beans.factory.annotation.Value;
   import org.springframework.context.annotation.Bean;
   import org.springframework.context.annotation.Configuration;

   @Configuration
   public class MinioConfiguration {

       @Value("${minio.endpoint}")
       private String endpoint;

       @Value("${minio.accessKey}")
       private String accessKey;

       @Value("${minio.secretKey}")
       private String secretKey;

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

1. 文件上传接口：创建一个文件上传接口，接收前端传来的文件数据，并将文件上传至 MinIO 或 OSS。

   import io.minio.MinioClient;
   import org.springframework.beans.factory.annotation.Autowired;
   import org.springframework.web.bind.annotation.PostMapping;
   import org.springframework.web.bind.annotation.RequestParam;
   import org.springframework.web.bind.annotation.RestController;
   import org.springframework.web.multipart.MultipartFile;

   @RestController
   public class FileUploadController {

       @Autowired
       private MinioClient minioClient;

       @PostMapping("/upload")
       public String uploadFile(@RequestParam("file") MultipartFile file) {
           try {
               minioClient.putObject("my-bucket", file.getOriginalFilename(), file.getInputStream(), file.getContentType());
               return "File uploaded successfully";
           } catch (Exception e) {
               return "Error uploading file: " + e.getMessage();
           }
       }
   }

五、代码解析

1. 前端部分：
   • 在 Vue 组件中，使用input元素的change事件来监听文件选择。当用户选择文件时，触发onFileChange方法。
   • 在onFileChange方法中，获取选择的文件，并调用uploadFile方法进行文件上传。
   • 在uploadFile方法中，创建一个FormData对象，将文件添加到FormData中。然后使用 axios 发送 POST 请求到后端的/upload接口，上传文件数据。
2. 后端部分：
   • 在 MinIO 配置类中，使用@Value注解从配置文件中读取 MinIO 的连接信息，并创建一个MinioClient bean。
   • 在文件上传控制器中，使用@Autowired注解注入MinioClient。在uploadFile方法中，接收前端传来的文件数据，使用MinioClient的putObject方法将文件上传至指定的桶中。

通过以上步骤，我们实现了使用 Vue3、TypeScript 和 Spring Boot 实现文件上传至 MinIO 和 OSS 的功能。在实际应用中，可以根据具体需求进行调整和扩展。