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

vue+elementui+springboot图片上传

news 2025/8/13 15:05:38

1、前端代码

<template><div><el-uploadclass="avatar-uploader"action="http://localhost:8081/ch06/demo/uploadAvatar":show-file-list="false":on-success="handleAvatarSuccess":before-upload="beforeAvatarUpload"><i class="el-icon-plus avatar-uploader-icon"></i></el-upload><div><img style=" width: 50px;height: 50px;" v-if="imageUrl" :src="imageUrl" class="avatar"></div>
</div>
</template>
<script>export default {data() {return {imageUrl: ''};},methods: {handleAvatarSuccess(res, file) {this.imageUrl = URL.createObjectURL(file.raw);},beforeAvatarUpload(file) {const isJPG = file.type === 'image/jpeg';const isLt2M = file.size / 1024 / 1024 < 2;if (!isJPG) {this.$message.error('上传头像图片只能是 JPG 格式!');}if (!isLt2M) {this.$message.error('上传头像图片大小不能超过 2MB!');}return isJPG && isLt2M;}}}
</script><style scoped></style>

以下是对这段代码的详细解释：

<template> 部分：

<el-upload> 组件：
class="avatar-uploader"：为上传组件添加类名。
action="http://localhost:8081/ch06/demo/uploadAvatar"：指定上传的后端接口地址。
:show-file-list="false"：表示不显示已上传文件列表。
:on-success="handleAvatarSuccess"：上传成功后的回调函数。
:before-upload="beforeAvatarUpload"：上传前的校验函数。
<i class="el-icon-plus avatar-uploader-icon"></i>：上传组件内显示的图标。
<div> 内的 <img>：根据条件显示图片，图片大小设置为 50x50 像素，通过 v-if="imageUrl" 控制是否显示，:src="imageUrl" 绑定图片源地址。

<script> 部分：

data() 中定义了 imageUrl 用于存储图片的 URL。
handleAvatarSuccess(res, file) 方法：在上传成功后，将上传文件的原始数据转换为 URL 并赋值给 imageUrl，以便显示图片。
beforeAvatarUpload(file) 方法：对要上传的文件进行校验，包括文件类型必须是 image/jpeg 以及文件大小不能超过 2MB，不满足条件则弹出错误消息并阻止上传。

2、后端代码

 /*** 上传图片* @param file* @param request* @return* @throws IOException*/@RequestMapping(value = "/uploadAvatar",method = {RequestMethod.POST})public Result imgUpDown(@RequestParam("file") MultipartFile file, HttpServletRequest request) throws IOException {if(!file.isEmpty()) {String fileName = file.getOriginalFilename();System.out.println(fileName+"+++++");//设置上传文件的保存地址目录String dirpath=request.getServletContext().getRealPath("/upload");System.out.println(dirpath);File parentFilePath=new File(dirpath);//如果保存文件不存在就先创建目录if(!parentFilePath.exists()) {parentFilePath.mkdir();}String fileNewName = UUID.randomUUID() + fileName;File newFile = new File(parentFilePath, fileNewName);file.transferTo(newFile);return Result.success();}return null;}

以下是对这段代码的详细解读：

@RequestMapping(value = "/uploadAvatar", method = {RequestMethod.POST})：定义了一个处理 HTTP POST 请求的接口，路径为/uploadAvatar。
public Result imgUpDown(@RequestParam("file") MultipartFile file, HttpServletRequest request) throws IOException：
@RequestParam("file")：表示从请求参数中获取名为file的多部分文件（上传的文件）。
方法内首先检查文件是否为空。如果不为空：
获取文件的原始文件名并打印。
通过请求获取上下文的真实路径下的/upload目录路径，并创建对应的文件对象。
如果该目录不存在则创建。
生成一个包含随机 UUID 和原始文件名的新文件名。
根据新文件名和目录创建新的文件对象。
使用file.transferTo(newFile)将上传的文件数据保存到新文件中。
最后返回表示成功的结果对象。如果文件为空则返回空。

总的来说，这段代码主要实现了接收一个上传的文件，进行一些处理（包括保存路径设置、文件名处理等）并保存文件的功能。