SpringBoot + Vue 头像上传

可以使用以下步骤实现SpringBoot和Vue的头像上传功能：

1. 在Vue中创建一个表单，包含一个文件上传框和一个提交按钮，例如：

<template>
  <div>
    <form @submit.prevent="uploadAvatar">
      <input type="file" name="avatar" @change="onFileChange">
      <button type="submit">上传头像</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      file: null
    }
  },
  methods: {
    onFileChange(e) {
      this.file = e.target.files[0]
    },
    uploadAvatar() {
      const formData = new FormData()
      formData.append('avatar', this.file)

      // 发送POST请求提交表单数据
      // ...
    }
  }
}
</script>

2. 在SpringBoot中创建一个Controller来处理文件上传请求，例如：

@RestController
@RequestMapping("/avatar")
public class AvatarController {
    @PostMapping
    public String uploadAvatar(@RequestParam("avatar") MultipartFile file) {
        // 处理文件上传逻辑
        // ...
        return "上传成功";
    }
}

3. 在SpringBoot的配置文件中添加文件上传配置，例如：

spring.servlet.multipart.max-file-size=10MB
spring.servlet.multipart.max-request-size=10MB

这样就可以在Vue中选择头像文件并上传到SpringBoot服务器了。在SpringBoot中，可以使用MultipartFile来处理文件上传，然后进行具体的文件处理操作。