文件上传重复提示vue和springboot代码
时间: 2024-05-11 20:19:43 浏览: 72
vue+springboot图片上传和显示的示例代码
5星 · 资源好评率100%
Vue前端代码:
```html
<template>
<div>
<input type="file" @change="uploadFile">
</div>
</template>
<script>
export default {
methods: {
uploadFile(event) {
const file = event.target.files[0];
const formData = new FormData();
formData.append("file", file);
axios.post("/api/upload", formData)
.then(response => {
console.log(response.data);
})
.catch(error => {
console.log(error);
});
}
}
};
</script>
```
Spring Boot后端代码:
```java
@RestController
@RequestMapping("/api")
public class UploadController {
@PostMapping("/upload")
public ResponseEntity<String> uploadFile(@RequestParam("file") MultipartFile file) {
String fileName = file.getOriginalFilename();
File tempFile = new File(fileName);
try {
file.transferTo(tempFile);
// 处理上传文件
} catch (IOException e) {
e.printStackTrace();
return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body("上传失败");
}
return ResponseEntity.ok("上传成功");
}
}
```
在Vue中使用`<input type="file">`标签选择文件后,通过axios将文件发送到后端的`/api/upload`接口。Spring Boot后端的`UploadController`接收到文件后,可以对文件进行处理并返回上传结果。如果上传成功,前端将会在控制台打印出响应数据。
阅读全文