vue3+springboot+minio，实现文件上传功能

前端：Vue 3

安装依赖

首先，确保你已经安装了Vue CLI，然后创建一个新的Vue项目：

```bash
npm install -g @vue/cli
vue create my-project
cd my-project
```

安装axios用于发送HTTP请求：

```bash
npm install axios
```

创建文件上传组件

在src/components目录下创建一个FileUpload.vue组件：

<template>
  <div>
    <input type="file" @change="handleFileUpload" />
    <button @click="submitFile">Upload</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      file: null,
    };
  },
  methods: {
    handleFileUpload(event) {
      this.file = event.target.files[0];
    },
    async submitFile() {
      const formData = new FormData();
      formData.append('file', this.file);

      try {
        const response = await axios.post('http://localhost:8080/upload', formData, {
          headers: {
            'Content-Type': 'multipart/form-data',
          },
        });
        console.log('File uploaded successfully', response.data);
      } catch (error) {
        console.error('Error uploading file', error);
      }
    },
  },
};
</script>

后端：Spring Boot

添加依赖

在你的pom.xml文件中添加以下依赖：

<dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <dependency>
        <groupId>io.minio</groupId>
        <artifactId>minio</artifactId>
        <version>8.3.4</version>
    </dependency>
    <!-- 其他依赖 -->
</dependencies>

配置MinIO

在application.properties中添加MinIO的配置：

```properties
minio.url=http://localhost:9000
minio.access-key=minioadmin
minio.secret-key=minioadmin
minio.bucket-name=mybucket
```

创建配置类

创建一个配置类用于读取配置：

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

@Configuration
public class MinioConfig {
@Value(“${minio.url}”)
private String minioUrl;

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

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

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

}
```

创建文件上传控制器

创建一个控制器类用于处理文件上传请求：

```java
import io.minio.MinioClient;
import io.minio.PutObjectArgs;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;

import java.io.IOException;

@RestController
@RequestMapping(“/upload”)
public class FileUploadController {

@Autowired
private MinioClient minioClient;

@Value("${minio.bucket-name}")
private String bucketName;

@PostMapping
public ResponseEntity<String> uploadFile(@RequestParam("file") MultipartFile file) {
    try {
        minioClient.putObject(
            PutObjectArgs.builder()
                .bucket(bucketName)
                .object(file.getOriginalFilename())
                .stream(file.getInputStream(), file.getSize(), -1)
                .contentType(file.getContentType())
                .build()
        );
        return ResponseEntity.ok("File uploaded successfully");
    } catch (Exception e) {
        e.printStackTrace();
        return ResponseEntity.status(500).body("Error uploading file");
    }
}

}
```

启动项目

1. 启动Spring Boot应用：在项目根目录下运行mvn spring-boot:run。
2. 启动Vue项目：在Vue项目根目录下运行npm run serve。

完成

现在，你应该可以通过Vue 3前端选择文件并上传到后端Spring Boot，然后存储到MinIO中了。