springboot+vue头像上传回显

要实现Spring Boot Vue头像上传并回显，可以按照以下步骤进行操作。

1. 前端页面实现图片上传

在Vue组件中添加一个图片上传组件，使用element-ui的上传组件（el-upload）。具体代码如下：

<template>
  <el-upload
    class="avatar-uploader"
    action="/api/upload"
    :show-file-list="false"
    :on-success="handleSuccess"
    :before-upload="beforeUpload">
    <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: {
    beforeUpload(file) {
      // 限制文件类型和大小
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 或 PNG 格式!')
        return false
      }
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
        return false
      }
      return true
    },
    handleSuccess(response) {
      if (response.code === 200) {
        this.imageUrl = response.data
        this.$emit('update:avatar', response.data) // 通知父组件更新头像
      } else {
        this.$message.error(response.msg)
      }
    }
  }
}
</script>

<style scoped>
.avatar-uploader {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  background-color: #f5f5f5;
}
.avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
}
</style>

在上传图片前，使用beforeUpload方法对文件类型和大小进行限制。在上传成功后，将服务器返回的图片地址保存到imageUrl中，并通过$emit方法通知父组件更新头像。

2. 后端实现图片上传

在Spring Boot中实现文件上传需要使用MultipartFile类型接收前端传来的文件。具体代码如下：

@RestController
@RequestMapping("/api")
public class FileUploadController {
    @Value("${file.upload.path}")
    private String filePath; // 文件保存路径

    @PostMapping("/upload")
    public Result upload(@RequestParam("file") MultipartFile file) {
        if (file.isEmpty()) {
            return Result.fail("上传失败，请选择文件");
        }
        String fileName = file.getOriginalFilename();
        String suffix = fileName.substring(fileName.lastIndexOf("."));
        String newFileName = UUID.randomUUID().toString() + suffix;
        File dest = new File(filePath + newFileName);
        try {
            file.transferTo(dest);
            return Result.success("上传成功", "/uploads/" + newFileName);
        } catch (IOException e) {
            e.printStackTrace();
        }
        return Result.fail("上传失败");
    }
}

在文件上传接口中，通过@Value注解从配置文件中读取文件保存路径，然后使用MultipartFile类型接收前端传来的文件。接收到文件后，使用UUID生成新的文件名，将文件保存到指定路径，并返回服务器存储的文件地址。

3. 更新用户头像

在Vue组件中，通过接收父组件传来的用户信息，将头像地址赋值给imageUrl。在头像上传成功后，通过$emit方法通知父组件更新头像。具体代码如下：

<template>
  <div>
    <avatar-upload :avatar="user.avatar" @update:avatar="updateAvatar"></avatar-upload>
    <el-button type="primary" @click="updateUser">更新用户信息</el-button>
  </div>
</template>

<script>
import AvatarUpload from '@/components/AvatarUpload.vue'

export default {
  components: {
    AvatarUpload
  },
  props: {
    user: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      form: {
        id: '',
        username: '',
        password: '',
        nickname: '',
        avatar: ''
      }
    }
  },
  created() {
    this.form = { ...this.user }
  },
  methods: {
    updateAvatar(avatar) {
      this.form.avatar = avatar
    },
    updateUser() {
      // 调用后端接口更新用户信息
    }
  }
}
</script>

在更新用户信息的方法中，调用后端接口将用户信息更新到数据库中。

@RestController
@RequestMapping("/api")
public class UserController {
    @Autowired
    private UserService userService;

    @PostMapping("/updateUser")
    public Result updateUser(@RequestBody User user) {
        userService.updateUser(user);
        return Result.success("更新成功");
    }
}

在UserService中实现更新用户信息的方法。

@Service
public class UserServiceImpl implements UserService {
    @Autowired
    private UserMapper userMapper;

    @Override
    public void updateUser(User user) {
        userMapper.updateById(user);
    }
}

以上就是Spring Boot Vue头像上传并回显的实现方法。