在Spring Cloud + Vue前后端分离的项目中，文件上传功能通常涉及后端（Spring Cloud微服务）和前端（Vue应用）的交互。以下是一个简化的例子，展示了如何在Spring Cloud微服务中实现文件上传接口，以及如何在Vue前端中调用该接口。
后端（Spring Cloud微服务）:
- 添加依赖（在
pom.xml中）:
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>- 创建文件上传的控制器:
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应用）:
- 安装axios（如果尚未安装）:
npm install axios- 创建文件上传的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接口，携带文件数据。后端接收到请求后处理文件上传。
请注意，这只是一个简化的例子，实际项目中你可能需要添加额外的安全措施（如权限校验）、错误处理、文件存储策略等。