当前位置：首页 > news >正文

springboot+vue上传图片

news 2025/6/28 8:11:14

这里是一个简单的示例，演示了如何在Spring Boot中从Vue.js上传图像：

1.前端Vue.js代码：

<template><div><input type="file" @change="handleFileUpload"><button @click="uploadImage">上传图片</button></div>
</template><script>
export default {name: 'ImageUploader',data() {return {imageFile: null,imageUrl: ''};},methods: {handleFileUpload(event) {this.imageFile = event.target.files[0];},uploadImage() {let formData = new FormData();formData.append('image', this.imageFile);axios.post('/api/image/upload', formData, {headers: {'Content-Type': 'multipart/form-data'}}).then(response => {this.imageUrl = response.data.imageUrl;});}}
};
</script>

后端Spring Boot代码：

@RestController
public class ImageController {@Value("${upload.path}")private String uploadPath;@PostMapping("/api/image/upload")public ResponseEntity<?> uploadImage(@RequestParam("image") MultipartFile file) {Map<String, Object> response = new HashMap<>();try {if (!file.isEmpty()) {String fileName = file.getOriginalFilename();Path filePath = Paths.get(uploadPath + "/" + fileName);Files.copy(file.getInputStream(), filePath, StandardCopyOption.REPLACE_EXISTING);String imageUrl = "/api/image/" + fileName;response.put("imageUrl", imageUrl);} else {response.put("status", "error");response.put("message", "No file uploaded");return ResponseEntity.badRequest().body(response);}} catch (IOException e) {response.put("status", "error");response.put("message", e.getMessage());return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body(response);}response.put("status", "success");return ResponseEntity.ok(response);}@GetMapping("/api/image/{fileName:.+}")public ResponseEntity<Resource> getImage(@PathVariable String fileName) throws IOException {Path filePath = Paths.get(uploadPath + "/" + fileName);Resource resource = new UrlResource(filePath.toUri());return ResponseEntity.ok().contentType(MediaType.IMAGE_JPEG).body(resource);}
}