vue+elementui+springboot图片上传

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

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

3、效果

4、总结

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

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