请代码举例,springboot+vue上传图片
时间: 2023-03-30 09:02:54 浏览: 114
好的,以下是一个简单的 Spring Boot 和 Vue.js 的图片上传示例代码:
Spring Boot 后端代码:
```java
@RestController
public class FileUploadController {
@PostMapping("/upload")
public String uploadFile(@RequestParam("file") MultipartFile file) throws IOException {
// 保存文件到本地
String fileName = file.getOriginalFilename();
File dest = new File("uploads/" + fileName);
file.transferTo(dest);
return "上传成功!";
}
}
```
Vue.js 前端代码:
```html
<template>
<div>
<input type="file" @change="handleFileUpload">
<button @click="uploadFile">上传</button>
</div>
</template>
<script>
export default {
data() {
return {
file: null
}
},
methods: {
handleFileUpload(event) {
this.file = event.target.files[];
},
uploadFile() {
let formData = new FormData();
formData.append('file', this.file);
axios.post('/upload', formData)
.then(response => {
console.log(response.data);
})
.catch(error => {
console.log(error);
});
}
}
}
</script>
```
这个示例中,用户可以在前端选择一个图片文件,然后点击上传按钮,将图片文件发送到后端的 `/upload` 接口。后端将图片文件保存到本地的 `uploads` 目录下,并返回一个上传成功的消息。
阅读全文