vue+elementui+springboot图片上传

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)将上传的文件数据保存到新文件中。
    • 最后返回表示成功的结果对象。如果文件为空则返回空。

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

3、效果

4、总结

第一段代码是前端部分，包含一个 el-upload 组件用于进行文件上传操作。它配置了上传的接口地址、一些显示相关的属性以及上传成功和上传前的处理函数。上传成功后会更新显示图片的 URL，上传前会对文件的类型和大小进行校验，不符合要求则给出提示并阻止上传。

第二段代码是后端部分，对应处理前端上传请求的方法。它接收上传的文件和请求对象，在文件非空的情况下，获取文件名，确定文件保存的目录路径，创建或确保目录存在，生成新文件名，创建新文件并将上传文件的数据保存到该新文件中，最后返回成功结果。若文件为空则返回空。总体上实现了文件上传的后端逻辑处理。