使用Vue + Spring Boot实现文件上传
在现代Web开发中，文件上传功能是一个非常常见的需求。在本教程中，我们将通过使用Vue.js作为前端框架和Spring Boot作为后端框架，来实现一个简单的文件上传功能。
一、项目结构
在开始之前，确保你的项目目录结构大致如下：
my-project/
│
├── frontend/ // Vue.js 前端项目
└── backend/ // Spring Boot 后端项目
二、后端部分 - Spring Boot
- 创建Spring Boot项目
你可以使用Spring Initializr创建一个新的Spring Boot项目，选择的依赖包括Web和Spring Boot DevTools。
- 添加文件上传依赖
在pom.xml中添加Spring Boot的文件上传需要的依赖：
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
- 创建上传控制器
在backend项目中，创建一个名为FileUploadController的控制器，负责处理文件上传请求：
package com.example.demo.controller;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
import java.io.File;
import java.io.IOException;
@RestController
@RequestMapping("/api/upload")
public class FileUploadController {
@PostMapping
public String handleFileUpload(@RequestParam("file") MultipartFile file) {
// 文件保存路径
String uploadDir = "uploads/";
// 创建目录
File dir = new File(uploadDir);
if (!dir.exists()) {
dir.mkdirs();
}
// 保存文件
try {
file.transferTo(new File(uploadDir + file.getOriginalFilename()));
return "文件上传成功: " + file.getOriginalFilename();
} catch (IOException e) {
e.printStackTrace();
return "文件上传失败: " + e.getMessage();
}
}
}
在这个控制器中，我们定义了一个POST方法handleFileUpload，接受一个MultipartFile类型的参数，该参数对应前端上传的文件。我们将文件保存到服务器上的uploads目录中。
- 设置application.properties
为了让Spring Boot允许大文件上传，你可以在src/main/resources/application.properties文件中添加以下配置：
spring.servlet.multipart.max-file-size=10MB
spring.servlet.multipart.max-request-size=10MB
三、前端部分 - Vue.js
- 创建Vue.js项目
使用Vue CLI创建一个新的Vue.js项目。
- 安装axios
由于我们需要进行HTTP请求，所以我们将使用axios。可以通过以下命令安装axios：
npm install axios
- 创建文件上传组件
在Vue.js项目中，创建一个名为FileUpload.vue的组件：
<template>
<div>
<h1>文件上传</h1>
<input type="file" @change="onFileChange" />
<button @click="uploadFile">上传</button>
<div v-if="message">{{ message }}</div>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
selectedFile: null,
message: ''
};
},
methods: {
onFileChange(event) {
this.selectedFile = event.target.files[0];
},
async uploadFile() {
if (!this.selectedFile) {
alert('请先选择一个文件！');
return;
}
const formData = new FormData();
formData.append('file', this.selectedFile);
try {
const response = await axios.post('http://localhost:8080/api/upload', formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
});
this.message = response.data;
} catch (error) {
console.error(error);
this.message = '文件上传失败';
}
}
}
};
</script>
在该组件中，我们使用了一个文件输入框来选择文件，并定义了uploadFile方法来发送POST请求上传文件。
- 引入和使用组件
在App.vue或者其他父组件中引入刚刚创建的FileUpload.vue组件：
<template>
<div id="app">
<FileUpload />
</div>
</template>
<script>
import FileUpload from './components/FileUpload.vue';
export default {
components: {
FileUpload
}
};
</script>
四、运行项目
-
启动Spring Boot后端应用：
mvn spring-boot:run -
启动Vue.js前端项目：
npm run serve -
在浏览器中访问
http://localhost:8080，你就能看到文件上传的界面，选择一个文件并点击上传按钮，文件将被保存到后端指定的目录中。
总结
通过以上步骤，我们成功实现了一个简单的文件上传功能，前端使用Vue.js，后端使用Spring Boot。这个例子展示了如何处理文件上传请求、如何使用FormData对象进行文件的传输，以及如何在Spring Boot中接收和保存上传的文件。在实际项目中，可以根据需求进一步扩展功能，如添加文件类型和大小的限制、显示上传进度等。
