vue springboot动态头像上传

### 实现Vue前端与Spring Boot后端集成用户头像动态上传 #### 前端部分：Vue实现文件选择和预览 为了实现在Vue中的文件选择以及预览功能，可以创建一个简单的表单用于选择图像文件并显示所选图片的缩略图。 ```vue <template> <div class="upload-container"> <input type="file" id="avatarUpload" accept="image/*" @change="onFileChange"/> <img v-if="imageUrl" :src="imageUrl" alt="Preview Image" /> </div> </template> <script> export default { data() { return { selectedFile: null, imageUrl: '' } }, methods: { onFileChange(event) { const file = event.target.files[0]; this.selectedFile = file; if (file) { let reader = new FileReader(); reader.onload = e => this.imageUrl = e.target.result; reader.readAsDataURL(file); } else { this.imageUrl = ''; } } } } </script> ``` 此代码片段展示了如何监听`input[type=file]`的变化事件，并通过`FileReader`对象读取选定文件的内容作为base64编码字符串来设置`img`标签的`src`属性从而达到即时预览的效果[^2]。 #### 后端部分：Spring Boot接收文件并保存到服务器 在Spring Boot应用程序中配置控制器以接受来自客户端发送过来的multipart/form-data请求体内的文件流。下面给出了一种可能的方式： ```java @RestController @RequestMapping("/api/v1/avatar") public class AvatarController { private static final Logger logger = LoggerFactory.getLogger(AvatarController.class); @PostMapping(consumes = MediaType.MULTIPART_FORM_DATA_VALUE) public ResponseEntity<String> uploadAvatar(@RequestParam("file") MultipartFile file){ try{ // Check if the file is empty if(file.isEmpty()){ throw new RuntimeException("Failed to store empty file"); } String fileName = StringUtils.cleanPath(Objects.requireNonNull(file.getOriginalFilename())); Path copyLocation = Paths.get(System.getProperty("user.dir")+ "/uploads/"); Files.copy(file.getInputStream(), copyLocation.resolve(fileName), StandardCopyOption.REPLACE_EXISTING); return ResponseEntity.ok().build(); } catch(Exception ex){ logger.error(ex.getMessage()); return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body("Error occurred while uploading avatar."); } } } ``` 这段Java代码定义了一个API endpoint `/api/v1/avatar`, 它能够处理POST方法提交上来的二进制数据形式的文件，并将其存储至指定路径下。 #### 发送AJAX请求完成整个过程 最后一步是在选择了想要上传的照片之后，在JavaScript里发起异步HTTP POST请求给上述提到的服务端点。这通常借助于axios库或者原生fetch API完成。 ```javascript async function submitForm(){ var formData = new FormData(); formData.append('file', document.getElementById('avatarUpload').files[0]); await fetch('/api/v1/avatar',{ method:'POST', body:formData }).then(response=>response.json()) .catch(error=>console.log('There was a problem with your request.',error)); } ``` 以上就是关于怎样利用Vue.js配合Spring Boot搭建一套完整的用户头像上传系统的说明。