以下是一个简化的例子，展示如何在Vue 3和Spring Boot中结合MinIO实现文件上传功能。
Vue 3 前端代码 (Upload.vue):
<template>
<div>
<input type="file" @change="uploadFile" />
</div>
</template>
<script setup>
import { ref } from 'vue';
import axios from 'axios';
const uploadFile = async (event) => {
const file = event.target.files[0];
const formData = new FormData();
formData.append('file', file);
try {
const response = await axios.post('/api/upload', formData, {
headers: {
'Content-Type': 'multipart/form-data',
},
});
console.log(response.data);
} catch (error) {
console.error(error);
}
};
</script>
Spring Boot 后端代码 (FileUploadController.java):
import org.springframework.http.ResponseEntity;
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 {
@PostMapping("/api/upload")
public ResponseEntity<String> uploadFile(@RequestParam("file") MultipartFile file) {
// 实现文件上传至MinIO的逻辑
// 假设minioService是负责上传文件的服务
// minioService.upload(file);
return ResponseEntity.ok("File uploaded successfully");
}
}
确保你已经配置好MinIO服务器的连接信息和相关权限。以上代码仅提供了文件上传的前端和后端逻辑框架，实际的MinIO服务交互需要你实现相关的服务。
注意：为了安全起见，不要在生产环境中直接暴露MinIO的访问和秘钥信息。应该使用环境变量或安全的配置管理来保护这些信息。