###
SpringBoot与Vue前端交互实现头像图片上传与展示
#### 后端逻辑设计
在
SpringBoot中，可以通过`@PostMapping`注解定义一个用于接收文件上传请求的接口。该接口会处理接收到的文件并将其保存到服务器指定路径下。
以下是基于引用中的代码片段所扩展的一个完整的控制器方法：
```java
@RestController
@RequestMapping("/api/avatar")
public class AvatarController {
private static final Logger log = LoggerFactory
.getLogger(AvatarController
.class);
@PostMapping("/upload")
public ResponseEntity<String> uploadAvatar(@RequestParam("name") String name,
@RequestParam("image") MultipartFile image) {
try {
if (image
.isEmpty()) {
return new ResponseEntity<>("请选择一张图片！", HttpStatus
.BAD_REQUEST);
}
double sizeInMb = 1
.0 * image
.getSize() / 10
24 / 10
24;
log
.info("{} 头像上传，头像大小为 {} MB", name, String
.format("%
.2f", sizeInMb));
if (!FileUpLoadUtil
.isImage(image)) {
return new ResponseEntity<>("仅支持图片格式！", HttpStatus
.BAD_REQUEST);
}
if (sizeInMb >
2) {
return new ResponseEntity<>("图片大小不能超过
2MB！", HttpStatus
.BAD_REQUEST);
}
// 调用工具类完成文件存储操作
String filePath = FileUpLoadUtil
.transferTo(name, image);
// 返回成功消息以及文件访问地址
Map<String, Object> result = new HashMap<>();
result
.put("
message", "上传成功！");
result
.put("url", "/uploads/" + filePath); // 文件访问路径
return new ResponseEntity<>(result, HttpStatus
.OK);
} catch (
Exception e) {
log
.error("头像上传失败：{}", e
.get
Message());
return new ResponseEntity<>("上传失败，请稍后再试！", HttpStatus
.INTERNAL_SERVER_ERROR);
}
}
}
```
上述代码实现了对传入参数的基本校验功能[^
2]，包括判断文件是否为空、验证其类型是否合法以及检查尺寸限制等条件。如果一切正常，则调用
自定义工具类 `FileUpLoadUtil` 将文件写入磁盘，并返回包含新生成资源链接的结果给客户端。
#### 前端组件开发
对于前端部分，在Vue项目里可以利用Element UI库提供的 `<el-upload>` 组件来简化表单提交流程。下面是一个简单的例子展示了如何配置此插件以便于配合后台API工作:
```vue
<template>
<div class="upload">
<!-- 使用 Element 的 el-upload -->
<el-upload
action="/api/avatar/upload"
:headers="{ Authorization: token }"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload">
<img v-if="imageUrl" :src="imageUrl" class="avatar"/>
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
<p>(允许上传jpg/png/gif/jpeg格式；最大不超过
2M)</p>
</div>
</template>
<script>
export default {
data () {
return {
imageUrl:'', // 存储当前用户的头像URL
token:'your_token' // 替换实际token
值
};
},
methods:{
handleAvatarSuccess(res){
this
.imageUrl=res
.url; // 更新视图上的图像源属性
},
beforeAvatarUpload(file){
const isJPGorPNG=file
.type === 'image/jpeg'||file
.type==='image/png';
const isLt
2M = file
.size / 10
24 / 10
24 <
2;
if(!isJPGorPNG){
alert('只接受 JPG/PNG 格式的图片！');
}
if(!isLt
2M){
alert('图片大小不得超过
2MB');
}
return isJPGorPNG && isLt
2M ;
}
}
};
</script>
<style scoped lang="scss">
.upload{
text-align:center;
}
.avatar{
width:8rem;height:auto;border-radius:
.5em;margin-bottom:1em;
}
.avatar-uploader-icon{
font-size:3em;color:#ccc;line-height:normal;padding-top:1em;
}
</style>
```
这里设置了隐藏默认文件列表(`:show-file-list="false"`), 并通过事件监听器捕获每次成功的响应数据更新DOM节点内的子元素样式[^3]
. 此外还加入了额外的安全措施防止非法输入进入系统
.
---
#### 总结说明
整个过程分为两个主要阶段——一是由用户发起HTTP POST 请求携带二进制流至服务端解析存档再反馈绝对URI供后续加载使用 ; 另一方面则是在浏览器环境下借助第三方框架封装好的指令快速构建交互
界面 , 让开发者能够专注于业务需求本身而非底层细节
.
扫一扫
671
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
