vue+elementui+springboot图片上传

news2025/6/22 18:22:00

1、前端代码

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

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