vue+SpringBoot的图片上传

原创已于 2024-03-18 19:52:19 修改 · 4.4k 阅读

32 ·

CC 4.0 BY-SA版权

文章标签：

#spring boot #java #后端

于 2023-11-23 15:34:12 首次发布

springboot 专栏收录该内容

21 篇文章

订阅专栏

本文详细介绍了如何使用Vue.js的Element-UI组件结合SpringBoot后端，实现前端用户上传图片的功能，包括前端组件的使用和后端接口的编写，以及注意事项。

📝个人主页：五敷有你
🔥系列专栏：Spring
⛺️稳中求进，晒太阳

在这篇博客中，我们将介绍如何使用Vue.js和Spring Boot实现图片上传功能。具体而言，我们会使用Element-UI组件来构建前端界面，同时在后端使用Spring Boot处理图片上传请求。

前端VUE的代码实现

1. 前端部分（Vue.js）

1.1 安装Element-UI

首先，确保你的项目中已经安装了Vue.js。然后，通过以下命令安装Element-UI：

npm install element-ui

1.2 使用Element-UI的上传组件

在Vue组件中使用Element-UI的上传组件，示例代码如下：

直接粘贴过来element-UI的组件实现

<template>
  <el-upload
    class="avatar-uploader"
    action="/uploadAvatar"
    :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>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: '', // 存储图片地址
    };
  },
  methods: {
    handleAvatarSuccess(response, file) {
      // 图片上传成功的处理逻辑
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      // 在上传之前的处理逻辑，例如文件大小限制、文件类型限制等
      const isJPG = file.type === 'image/jpeg';
      const isPNG = file.type === 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!(isJPG || isPNG)) {
        this.$message.error('上传头像图片只能是 JPG 或 PNG 格式!');
      }

      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }

      return (isJPG || isPNG) && isLt2M;
    },
  },
};
</script>

<style scoped>
.avatar-uploader {
  display: inline-block;
  text-align: center;
}

.avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  line-height: 1.5;
}
</style>

后端springboot的代码实现

2.1 创建Spring Boot项目

使用Spring Initializer创建一个简单的Spring Boot项目，添加Spring Web和其他所需的依赖。

2.2 编写图片上传接口

创建一个控制器类 UploadAvatarController.java 处理图片上传请求：

package com.aqiuo.controller;


import com.aqiuo.entity.dto.Result;
import com.aqiuo.utils.RandomUtil;
import lombok.extern.slf4j.Slf4j;
import org.springframework.http.HttpRequest;
import org.springframework.util.ResourceUtils;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;

import javax.servlet.http.HttpServletRequest;
import java.io.File;
import java.io.IOException;
import java.util.UUID;

@RestController
@ResponseBody
@Slf4j
public class UploadAvatar {

    @RequestMapping(value = "/uploadAvatar",method = {RequestMethod.POST})
    public Result imgUpDown(@RequestParam("file") MultipartFile file, HttpServletRequest request) throws IOException {

        if(!file.isEmpty()) {

            String fileName = file.getOriginalFilename();

            String suffixName = fileName.substring(fileName.indexOf("."));
            //设置上传文件的保存地址目录
            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.ok(newFile);
        }
        return null;
    }
}

易错地点：

文件的存储位置一定要明确