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

这篇文章距离上次修改已过248天，其中的内容可能已经有所变动。

以下是一个简化的例子，展示如何在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的访问和秘钥信息。应该使用环境变量或安全的配置管理来保护这些信息。

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

评论已关闭

推荐阅读