用springboot+vue+elementUI实现上传头像并显示

这个功能可以分为两部分，一是前端页面实现上传功能并选择头像，二是后端接收图片并保存，提供给前端展示。

前端页面实现上传功能：

1. 首先需要引入elementUI的Upload组件，可以在main.js中全局引入。

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App.vue'

Vue.use(ElementUI)

new Vue({
  render: h => h(App),
}).$mount('#app')

2. 在Vue组件中使用Upload组件。

<template>
  <div>
    <el-upload
      action="/api/upload"
      :show-file-list="false"
      :on-success="handleUploadSuccess"
      :before-upload="beforeUpload"
      class="avatar-uploader">
      <img v-if="imageUrl" :src="imageUrl" class="avatar">
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: ''
    }
  },
  methods: {
    handleUploadSuccess(response) {
      this.imageUrl = response.data.url
    },
    beforeUpload(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 格式')
        return false
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB')
        return false
      }
      return true
    }
  }
}
</script>

<style>
.avatar-uploader {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  border: 1px dashed #ccc;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
}

.avatar-uploader-icon {
  font-size: 24px;
}

.avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>

其中，action属性指定了上传图片的地址，这里是/api/upload；show-file-list属性设置为false，表示上传完成后不显示文件列表；before-upload方法用于对上传的图片进行校验，例如格式和大小，如果校验不通过则不会上传；handleUploadSuccess方法用于处理上传成功后返回的数据，这里将返回的图片URL保存在imageUrl中，然后在页面上展示。

后端接收图片并保存：

1. 在Spring Boot项目中添加文件上传配置，在application.properties中添加如下配置：

spring.servlet.multipart.enabled=true
spring.servlet.multipart.file-size-threshold=2KB
spring.servlet.multipart.max-file-size=10MB
spring.servlet.multipart.max-request-size=100MB

其中，file-size-threshold属性表示文件大小阈值，小于此值的文件将存储在内存中，大于此值的文件将存储在磁盘上；max-file-size属性表示最大文件大小，超过此大小的文件将被拒绝；max-request-size属性表示最大请求大小，即上传文件的总大小不能超过此值。

2. 创建一个Controller类用于处理上传请求，例如：

@RestController
@RequestMapping("/api")
public class UploadController {

    @Autowired
    private Environment env;

    @PostMapping("/upload")
    public Result upload(MultipartFile file) {
        if (file.isEmpty()) {
            return Result.error("上传文件不能为空");
        }
        try {
            String fileName = file.getOriginalFilename();
            String suffix = fileName.substring(fileName.lastIndexOf(".") + 1);
            if (!Arrays.asList("jpg", "jpeg", "png").contains(suffix.toLowerCase())) {
                return Result.error("上传文件格式不正确");
            }
            String filePath = env.getProperty("upload.path");
            File dest = new File(filePath + fileName);
            file.transferTo(dest);
            return Result.success("上传成功", "/upload/" + fileName);
        } catch (IOException e) {
            e.printStackTrace();
            return Result.error("上传失败");
        }
    }
}

其中，@PostMapping注解指定了请求方法为POST，请求路径为/api/upload；upload方法接收一个MultipartFile类型的文件参数，用于接收上传的文件；首先校验文件是否为空，然后获取文件名和后缀，校验文件格式是否正确，最后将文件保存到指定的目录中，返回上传成功后的文件URL。

3. 在配置文件中添加上传文件存储路径配置：

upload.path=/path/to/upload/folder/

其中，/path/to/upload/folder/为自定义的上传文件存储路径。

4. 启动Spring Boot项目，访问前端页面，选择图片上传后，可以看到图片成功显示在页面上，并且在上传文件存储路径中生成了对应的文件。