vue3+springboot+minio,实现文件上传功能
    		       		warning:
    		            这篇文章距离上次修改已过422天,其中的内容可能已经有所变动。
    		        
        		                
                以下是一个简化的例子,展示如何在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的访问和秘钥信息。应该使用环境变量或安全的配置管理来保护这些信息。
评论已关闭