Spring Cloud + Vue前后端分离-第8章 文件上传功能开发

在Spring Cloud + Vue前后端分离的项目中，文件上传功能通常涉及后端（Spring Cloud微服务）和前端（Vue应用）的交互。以下是一个简化的例子，展示了如何在Spring Cloud微服务中实现文件上传接口，以及如何在Vue前端中调用该接口。

后端（Spring Cloud微服务）:

1. 添加依赖（在pom.xml中）:

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>

2. 创建文件上传的控制器:

import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
 
@RestController
@RequestMapping("/api/file")
public class FileUploadController {
 
    @PostMapping("/upload")
    public String handleFileUpload(@RequestParam("file") MultipartFile file) {
        // 处理文件上传逻辑，例如保存到服务器
        // 返回文件的存储路径或其他信息
        return "文件上传成功: " + file.getOriginalFilename();
    }
}

前端（Vue应用）:

1. 安装axios（如果尚未安装）:

npm install axios

2. 创建文件上传的Vue组件:

<template>
  <div>
    <input type="file" @change="uploadFile" />
  </div>
</template>
 
<script>
import axios from 'axios';
 
export default {
  methods: {
    uploadFile(event) {
      const file = event.target.files[0];
      const formData = new FormData();
      formData.append('file', file);
 
      axios.post('/api/file/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      })
      .then(response => {
        console.log(response.data);
      })
      .catch(error => {
        console.error(error);
      });
    }
  }
}
</script>

在这个例子中，前端使用<input type="file">来让用户选择文件，然后使用axios库发送一个POST请求到后端的/api/file/upload接口，携带文件数据。后端接收到请求后处理文件上传。

请注意，这只是一个简化的例子，实际项目中你可能需要添加额外的安全措施（如权限校验）、错误处理、文件存储策略等。