掌握前后端数据交互的3种核心方式

application/x-www-form-urlencoded格式

前端

export const userUpdateAvatarService = (avatarUrl) => {const params = new URLSearchParams();params.append('avatarUrl', avatarUrl);return request.patch('/user/updateAvatar', params, {headers: {'Content-Type': 'application/x-www-form-urlencoded'}});
}

后端

@PatchMapping("/updateAvatar")
public Result updatePic(@RequestParam@Pattern(regexp = "^(https?://)?([a-zA-Z0-9.-]+\\.[a-zA-Z]{2,})(:\\d+)?(/[^\\s]*)?\\.(jpg|jpeg|png|gif)$",message = "头像地址必须是有效的HTTP/HTTPS URL，且以.jpg、.jpeg、.png或.gif结尾") String avatarUrl) {userService.updateAvatar(avatarUrl);return Result.success();
}

JSON格式

前端

export const userUpdateAvatarService = (avatarUrl) => {return request.patch('/user/updateAvatar', { avatarUrl });
}

后端

public Result updatePic(@RequestBody Map<String, String> requestBody) {String avatarUrl = requestBody.get("avatarUrl");// 验证和业务处理
}

文件上传

multipart/form-data; boundary=----WebKitFormBoundaryxxxxxxxxxxx

后端

@PostMapping("/upload")public Result<String> upload(MultipartFile file) throws IOException {log.info("文件上传开始...");// 获取原始文件名String originalFilename = file.getOriginalFilename();log.info("原始文件名:{}", originalFilename);// 获取文件后缀String suffix = null;if (originalFilename != null) {suffix = originalFilename.substring(originalFilename.lastIndexOf("."));}// 新文件名 uuid+文件后缀String filename = UUID.randomUUID() + suffix;// 把文件的内容存储到本地磁盘上
//        file.transferTo(new File("C:\\Users\\Administrator\\Desktop\\files\\" + filename));String url = aliOssUtil.uploadFile(filename, file.getInputStream());log.info("文件上传成功：{}", url);return Result.success(url);}