springboot +vue +element-ui实现头像上传

要实现头像上传，可以结合Spring Boot后端框架，Vue前端框架以及Element UI组件库进行实现。

首先，在Vue前端页面中，可以使用Element UI中的Upload组件实现文件上传功能。可以在页面中定义一个Upload组件，设置action属性为上传接口的URL，设置headers属性为请求头部信息，设置on-success属性为上传成功后的回调函数。具体代码如下：

<template>
  <div>
    <el-upload
      class="avatar-uploader"
      action="/api/uploadAvatar"
      :headers="{ Authorization: 'Bearer ' + token }"
      :show-file-list="false"
      :on-success="handleSuccess">
      <img v-if="imageUrl" :src="imageUrl" class="avatar">
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
  </div>
</template>

<script>
import { getToken } from '@/utils/auth'

export default {
  data() {
    return {
      imageUrl: '',
      token: getToken()
    }
  },
  methods: {
    handleSuccess(response) {
      this.imageUrl = response.data.url
    }
  }
}
</script>

其中，token是用于认证的令牌，可以通过getToken函数获取。handleSuccess函数是上传成功后的回调函数，其中response.data.url表示上传成功后的图片URL。

然后，在Spring Boot后端接口中，可以使用Spring MVC的注解@RequestParam来接收上传的文件。具体代码如下：

@RestController
@RequestMapping("/api")
public class UploadController {
    
    @PostMapping("/uploadAvatar")
    public JsonResult uploadAvatar(@RequestParam("file") MultipartFile file) throws IOException {
        // 处理上传的文件
        return JsonResult.ok("url", "http://www.example.com/avatar.jpg");
    }
}

其中，@PostMapping注解表示接收POST请求，@RequestParam("file")注解表示接收名为file的文件参数。处理上传的文件后，可以返回一个JsonResult对象，其中包含上传成功后的图片URL。