springboot和vue3图片上传展示

### 实现 Spring Boot 后端与 Vue 3 前端之间图片上传和展示 #### 后端 (Spring Boot) 为了处理文件上传请求，在 `Spring Boot` 中需要创建一个控制器来接收并保存上传的文件。 ```java import org.springframework.web.bind.annotation.*; import org.springframework.web.multipart.MultipartFile; import java.io.IOException; import java.nio.file.Files; import java.nio.file.Path; import java.nio.file.Paths; @RestController @RequestMapping("/api/files") public class FileUploadController { private static final String UPLOAD_DIR = "uploads/"; @PostMapping("/upload") public ResponseEntity<String> uploadFile(@RequestParam("file") MultipartFile file) { try { Path copyLocation = Paths.get(UPLOAD_DIR + file.getOriginalFilename()); Files.copy(file.getInputStream(), copyLocation); return ResponseEntity.ok("File uploaded successfully: " + file.getOriginalFilename()); } catch (IOException e) { e.printStackTrace(); return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body("Failed to upload file"); } } } ``` 此代码片段定义了一个简单的 RESTful API 来接受来自客户端的多部分表单数据，并将其写入服务器上的指定目录[^1]。 对于服务端存储配置，确保应用程序具有读取/写入权限到设置的目标路径 (`UPLOAD_DIR`)。如果是在生产环境中部署，则建议使用云存储解决方案或者专用的对象存储服务而不是本地磁盘空间。 #### 前端 (Vue 3) 在前端方面，利用 `axios` 发送 POST 请求给后端接口完成文件传输的同时也能够获取返回的结果信息以便于后续逻辑处理： ```javascript // src/views/FileUploadView.vue <template> <div> <input type="file" ref="fileInput"/> <button @click="handleUpload">点击上传</button> </div> </template> <script setup> import { ref, reactive } from 'vue'; import axios from 'axios'; const fileInput = ref(null); function handleUpload() { const formData = new FormData(); formData.append('file', fileInput.value.files[0]); axios.post('/api/files/upload', formData, { headers: {'Content-Type': 'multipart/form-data'} }) .then(response => console.log(response.data)) .catch(error => console.error(error)); } </script> ``` 上述组件提供了一个输入框让用户选择要上传的图像以及按钮触发实际提交过程；当用户选择了某个文件之后再按下“点击上传”，就会调用 `handleUpload()` 方法执行 AJAX 请求向 `/api/files/upload` 地址发送所选中的二进制流对象[^2]。 至于预览功能可以在用户选取文件时立即显示缩略图而无需等待成功上载至远程服务器后再加载查看效果: ```html <!-- Add this inside the template tag --> <img v-if="previewUrl" :src="previewUrl" alt="Preview Image"> ``` ```javascript // Inside script section add these lines under existing code block const previewUrl = computed(() => URL.createObjectURL(fileInput.value?.files[0])); watch(previewUrl, () => { // Revoke object URL when it's no longer needed. if (previousImageUrl) URL.revokeObjectURL(previousImageUrl); }); let previousImageUrl = null; // Track previously created URLs for cleanup purposes. // Update watch handler accordingly by adding following line at end of function body: previousImageUrl = previewUrl.value; ``` 这段增强后的脚本会在每次更改选定文件时更新视图中 `<img>` 元素的数据源属性从而即时呈现出新选择的内容作为临时性的视觉反馈[^3]。