无缝集成：使用Spring Boot和Vue实现头像上传与回显功能

news2025/6/9 9:53:35

🌟 前言

欢迎来到我的技术小宇宙！🌌 这里不仅是我记录技术点滴的后花园，也是我分享学习心得和项目经验的乐园。📚 无论你是技术小白还是资深大牛，这里总有一些内容能触动你的好奇心。🔍

  • 🤖 洛可可白：个人主页

  • 🔥 个人专栏：✅前端技术 ✅后端技术

  • 🏠 个人博客：洛可可白博客

  • 🐱 代码获取：bestwishes0203

  • 📷 封面壁纸：洛可可白wallpaper

在这里插入图片描述

文章目录

无缝集成：使用Spring Boot和Vue实现头像上传与回显功能

在现代Web应用中，用户个性化体验尤为重要，其中头像上传与回显是一个常见的功能需求。本文将详细介绍如何使用Spring Boot和Vue.js构建一个前后端协同工作的头像上传系统，并实现图片的即时回显。

技术栈介绍

  • Spring Boot：一个基于Spring框架的开源项目，用于简化Spring应用的初始搭建以及开发过程。它通过提供默认配置减少开发中的配置工作，使得开发者能够快速启动和部署Spring应用。

  • Vue.js：一个渐进式JavaScript框架，用于构建用户界面。Vue的核心库只关注视图层，易于上手，同时也能够配合其他库或现有项目使用。Vue.js以其轻量级、高效性和灵活性而广受欢迎。

后端实现

后端使用Spring Boot框架，通过@RestController注解定义一个控制器UploadController，提供/upload端点处理文件上传请求。代码中使用了MultipartFile来接收上传的文件，并将其保存到服务器的指定目录。

添加依赖

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

代码注释

@RestController
public class UploadController {
    @Operation(summary = "上传图片到本地")
    @PostMapping("/upload")
    public String upload(MultipartFile file) {
        if (file.isEmpty()) {
            return "图片为空";
        }
        String originalFilename = file.getOriginalFilename();
        String fileNamePrefix = new SimpleDateFormat("yyyyMMddHHmmssSSS").format(new Date());
        assert originalFilename != null;
        String fileNameSuffix = "." + originalFilename.split("\\.")[1];
        String fileName = fileNamePrefix + fileNameSuffix;
        ApplicationHome applicationHome = new ApplicationHome(this.getClass());
        //String pre = applicationHome.getDir().getParentFile().getParentFile().getAbsolutePath() + "\\src\\main\\resources\\static\\images\\";
        String pre = applicationHome.getDir().getParentFile().getParentFile().getParentFile().getAbsolutePath() + "\\spring-ui\\src\\assets\\avatar\\";
        String path = pre + fileName;
        try {
            file.transferTo(new File(path));
            String replace = path.replace(applicationHome.getDir().getParentFile().getParentFile().getParentFile().getAbsolutePath() + "\\spring-ui\\src", "/src");
            return replace.replace("\\", "/");
        } catch (IOException e) {
            e.printStackTrace();
        }
        return "图片上传失败";
    }
}

前端实现

前端使用Vue.js框架，通过封装axios请求和全局配置，实现与后端的通信。同时，使用Vite作为构建工具，配置代理解决跨域问题。

代码注释

全局配置封装
// config/index.ts
export const baseURL = '/api'; // 基础URL
export const timeout = 10000; // 请求超时时间
export const headers = { 'X-Custom-Header': 'foobar' }; // 自定义请求头
Axios二次封装
// request/index.ts
const request = axios.create({
    // 配置axios实例
    baseURL,
    timeout,
    headers
});
// 添加请求和响应拦截器
request.interceptors.request.use((config) => {
    // 请求拦截器逻辑
    return config;
}, (error) => {
    // 响应拦截器逻辑
    return Promise.reject(error);
});
Api接口请求
//api/index.ts
import * as common from '@/api/common'
import * as user from '@/api/user'

const api = {
    common,
    user,
}

export default api;

//api/common.ts
import request from "@/request";

// 响应接口
export interface UploadRes {}

/**
 * 上传图片到本地
 * @param {string} file
 * @returns
 */
export function upload(file: object): Promise<UploadRes> {
    return request.post(`/upload`, file);
}

//api/user.ts
import request from "@/request";

// 参数接口
export interface UpdateUserParams {
    id?: number;
    name?: string;
    sex?: string;
    age?: number;
    pic?: string;
    acc?: string;
    pwd?: string;
    phone?: string;
    email?: string;
    dept?: string;
    post?: string;
    status?: string;
    createBy?: string;
    createTime?: string | unknown;
    updateBy?: string;
    updateTime?: string | unknown;
    remark?: string;
}

// 响应接口
export interface UpdateUserRes {
    message: string;
    success: boolean;
    code: number;
    data: Record<string, unknown>;
}

/**
 * 修改-账号
 * @param {object} params $!{table.comment}
 * @param {number} params.id
 * @param {string} params.name 姓名
 * @param {string} params.sex 性别
 * @param {number} params.age 年龄
 * @param {string} params.pic 头像
 * @param {string} params.acc 账号
 * @param {string} params.pwd 密码
 * @param {string} params.phone 电话号码
 * @param {string} params.email 电子邮件
 * @param {string} params.dept 用户部门
 * @param {string} params.post 用户岗位
 * @param {string} params.status 状态（0正常 1停用）
 * @param {string} params.createBy 创建者
 * @param {object} params.createTime 创建时间
 * @param {string} params.updateBy 更新者
 * @param {object} params.updateTime 更新时间
 * @param {string} params.remark 备注
 * @returns
 */
export function updateUser(params: UpdateUserParams): Promise<UpdateUserRes> {
    return request.post(`/userEntity/update`, params);
}

解决CORS跨域问题
// vite.config.ts
export default defineConfig({
    server: {
        proxy: {
            "/api": {
                target: "http://localhost:9090/", // 后端服务地址
                changeOrigin: true, // 是否改变源
                rewrite: (path) => path.replace(/\/api/, ""), // 重写路径
            },
        },
    },
});
业务处理代码
<template>
    <!-- 上传组件和提示信息 -->
    <el-upload drag :show-file-list="false" :limit="1" action="#" :auto-upload="false" accept=".png"
               :on-change="handleChanges">
      <el-icon class="el-icon--upload">
        <upload-filled/>
      </el-icon>
      <div class="el-upload__text">
        <em> 点击 </em> 或<em> 拖动文件 </em>上传
      </div>
      <template #tip>
        <div class="el-upload__tip">
          仅支持 jpg/png 格式文件大小小于 2MB
        </div>
      </template>
    </el-upload>
</template>

<script setup>
import { ref } from "vue";
import api from "@/api";

// 响应式引用，用于存储用户信息
const user = ref({});

// 生命周期钩子，初始化时获取用户信息
onMounted(() => {
    user.value = JSON.parse(localStorage.getItem("user"));
});

// 处理文件变化，上传文件并更新用户信息

//修改头像
const handleChanges = (file) => {
  if (file.raw.type !== 'image/png') {//限制文件类型
    ElMessage.error({message: "只能上传png格式的文件", grouping: true, showClose: true});
    return false;
  }
  if (file.raw.size / 1024 / 1024 > 5) {
    ElMessage.error('文件大于 5MB!')
    return false;
  }
  const param = new FormData();
  param.append('file', file.raw);
  api.common.upload(param).then((res: any) => {
    if (res !== null) ElMessage.success("上传成功");
    if (res === null) ElMessage.error("上传失败");
    api.user.updateUser({id: user.value.id, pic: res}).then((res: any) => {
      api.user.selectUserByAcc(user.value.acc).then((res: any) => {
        //更新缓存
        localStorage.setItem("user", JSON.stringify(res.data));
        //更新左侧描述列表
        user.value = res.data;
      })
    })
  })
};
</script>

<style scoped>
:deep(.el-descriptions__label) {
  min-width: 60px !important;
}
</style>

功能演示

在文章的最后，我们将展示上传头像功能的完整流程，包括前端的上传界面、后端的文件保存逻辑，以及成功上传后的头像回显效果。

上传前

上传后

结语

通过本文的介绍，我们学习了如何使用Spring Boot和Vue.js实现一个完整的头像上传与回显功能。这种前后端分离的开发模式不仅提高了开发效率，也使得系统更加模块化和易于维护。随着技术的不断进步，我们期待未来能够有更多类似的协同工作解决方案出现，以满足不同场景下的开发需求。

如果对你有帮助，点赞👍、收藏💖、关注🔔是我更新的动力！👋🌟🚀

🎉 往期精彩回顾

前端与后端协同：实现Excel导入导出功能
Java日期格式化：掌握时间的艺术
JavaScript日期格式化：从原始值到用户友好的字符串
入门教程：Windows搭建C语言和EasyX开发环境
CentOS系统下Docker的安装教程
Spring Boot单元测试全指南：使用Mockito和AssertJ
Yarn简介及Windows安装与使用指南
H5实现3D旋转照片墙教程
Element-Plus 实现动态渲染图标教程
MyBatis-Plus分页接口实现教程：Spring Boot中如何编写分页查询
Element-Plus下拉菜单边框去除教程

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1585995.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

STC89C52学习笔记（五）

STC89C52学习笔记（五）

STC89C52学习笔记&#xff08;五&#xff09; 综述&#xff1a;文本讲述了代码中速写模板的创建、如何将矩阵键盘的按键与数字一一对应以及如何创建一个矩阵键盘密码锁。 一、速写模板 点击“templates”&#xff0c;再鼠标右键选择配置&#xff0c;按照以下方式即可修改一些…
阅读更多...
正压自动放水器

正压自动放水器

劣质产品或许能骗一个人 却骗不了一群人 更骗不了五湖四海的人 因为品质&#xff0c;所以传播因为认同&#xff0c;所以分享 一、正压放水器概述&#xff1a; 正压自动放水器的型号为CWG-ZY&#xff0c;C指瓦斯抽放&#xff08;采&#xff09;中抽放&#xff08;采&#xff…
阅读更多...
Linux系统概述与安装

Linux系统概述与安装

Linux的介绍 Linux内核 Linux内核是 Linux 操作系统主要组件&#xff0c;也是计算机硬件与其软件之间的交互入口。它负责两者之间的通信&#xff0c;还要尽可能高效地管理资源 Linux Shell shell是系统的用户界面&#xff0c;提供了用户与内核进行交互操作的一种接口 Linux文…
阅读更多...
Vmware虚拟机Centos7固定IP地址

Vmware虚拟机Centos7固定IP地址

1、点击编辑-虚拟网络编辑器 2、点击更改设置、修改虚拟网络配置器并确认保存&#xff08;见图&#xff09; 这个子网IP和子网掩码的前三位需要一样网关的前三位需要和子网ip一致。 3、打开设置“网络和Internet”&#xff0c;点击“更改适配器选项”&#xff0c;点击适配器VM…
阅读更多...
Github第一Star数的国产免费开源防火墙--雷池社区版初步体验

Github第一Star数的国产免费开源防火墙--雷池社区版初步体验

前言 近期准备搭建一个博客网站&#xff0c;用来存储工作室同学们的学习笔记。服务器准备直接放在公网上&#xff0c;方便大家随时随地的上传和浏览&#xff0c;为了防止网站被人日穿成为肉鸡&#xff0c;一些防御措施还是要部署的。 首先明确自己的需求&#xff1a; 零成本…
阅读更多...
【数据结构】双向链表 C++

【数据结构】双向链表 C++

一、什么是双向链表 1、定义 双向链表也叫双链表&#xff0c;是链表的一种&#xff0c;它的每个数据结点中都有两个指针&#xff0c;分别指向直接后继和直接前驱。所以&#xff0c;从双向链表中的任意一个结点开始&#xff0c;都可以很方便地访问它的前驱结点和后继结点。 双…
阅读更多...
企业工商信息查询API接口有哪些

企业工商信息查询API接口有哪些

当今社会我们几乎每天都在和一些企业打交道&#xff0c;有时候需要确认下这家企业经营范围&#xff0c;注册地址等信息&#xff0c;那怎么办呢&#xff0c;这个时候就需要一些企业工商信息查询的API接口了。 有的时候你可以只知道这家公司的大概企业名称&#xff0c;比如数脉&…
阅读更多...
Python中sort（）函数、sorted()函数的用法深入讲解（具体实例：蓝桥杯数位排序）

Python中sort（）函数、sorted()函数的用法深入讲解（具体实例：蓝桥杯数位排序）

前置知识&#xff1a; 可迭代对象的定义&#xff1a;可迭代对象是指可以被迭代或遍历的对象&#xff0c;即可以使用循环结构对其进行逐个访问的对象。 在Python中常见的可迭代对象有&#xff1a;列表(list)、元组&#xff08;tuple&#xff09;、字符串&#xff08;sting&…
阅读更多...
【踩坑日记】Pop!OS中文输入法的坑

【踩坑日记】Pop!OS中文输入法的坑

文章目录 前言一、编译安装最新的IBus-pinyin输入法1.卸载旧输入法2.安装编译依赖3.下载源码4.编译和安装libpinyin5.编译和安装ibus-libpinyin6.重启IBus服务二、安装Fcitx5前言 使用Linux时，特别是涉及到中文的时候，会遇到一些问题。我最近在使用Pop!OS 22.04，这是Ubuntu…
阅读更多...
如何监控容器或K8s中的OpenSearch

如何监控容器或K8s中的OpenSearch

概述 当前 OpenSearch 使用的越来越多, 但是 OpenSearch 生态还不尽完善. 针对如下情况: 监控容器化或运行在 K8s 中的 OpenSearch 我查了下, 官方还没有提供完备的方案. 这里如何监控 K8s 中的 OpenSearch, 包括安装 exporter 插件、采集、展示全环节。 OpenSearch 简介…
阅读更多...
数据库数据恢复—Sql Server数据库文件丢失如何恢复数据？

数据库数据恢复—Sql Server数据库文件丢失如何恢复数据？

服务器数据恢复环境&#xff1a; 一台安装windows server操作系统的服务器。一组由8块硬盘组建的RAID5&#xff0c;划分LUN供这台服务器使用。 在windows服务器内装有SqlServer数据库。存储空间LUN划分了两个逻辑分区。 服务器故障&初检&#xff1a; 由于未知原因&#xf…
阅读更多...
git 删除本地分支 删除远程仓库分支

git 删除本地分支 删除远程仓库分支

语法&#xff1a; 删除本地分支 git branch -D <分支名>删除远程分支 git push <remote名称> <分支名> --delete 示例&#xff1a; 删除本地分支 git branch -D feature/test_listview删除远程分支 git push origin feature/test_listview --delete 两个…
阅读更多...
润色问题解惑

润色问题解惑

上博士为了毕业写学术论文头都大了&#xff0c;但更难受的是英语不咋地&#xff0c;投稿后经常会因为语言问题而惨遭拒稿&#xff0c;每每想起就令人心情郁郁&#xff0c;天台可期。有些审稿人也会直接告知需要专业的修改&#xff0c;那咋整呢&#xff0c;让润色呗&#xff0c;…
阅读更多...
腾讯社交广告推广如何开户和费用攻略

腾讯社交广告推广如何开户和费用攻略

腾讯社交广告平台&#xff0c;依托腾讯系庞大的用户基数与丰富的应用场景&#xff0c;为广告主提供了极具潜力的营销渠道。从微信朋友圈、QQ空间到腾讯新闻、腾讯视频等多款热门应用&#xff0c;腾讯社交广告覆盖了亿万级用户群体&#xff0c;是企业提升品牌知名度、推动产品销…
阅读更多...
如何做好谷歌广告投放？谷歌广告投放要点解析

如何做好谷歌广告投放？谷歌广告投放要点解析

市场是在不断变化的&#xff0c;搜索引擎上的网站排名也随着市场的变化而变化。如果你的广告战术一成不变&#xff0c;很容易花冤枉钱。从本质上来讲&#xff0c;谷歌广告的优化工作就是让商家在搜索引擎上保持长久的市场竞争力。 如果商家不经常优化Google广告&#xff0c;可能…
阅读更多...
谈谈系列之OA又见OA

谈谈系列之OA又见OA

确实没想到&#xff0c;绕了一圈&#xff0c;居然又回到了OA&#xff0c;当年从HW从来&#xff0c;就是不想仅仅只做给内部人用的产品&#xff0c;没想到兜兜转转&#xff0c;又回到了给“内部人做产品”的“老路”。 当然&#xff0c;就像先哲赫拉克利特说的——人不能两次走进…
阅读更多...
【随笔】Git 高级篇 -- 提交的技巧（下） cherry-pick commit --amend（十九）

【随笔】Git 高级篇 -- 提交的技巧（下） cherry-pick commit --amend（十九）

&#x1f48c; 所属专栏&#xff1a;【Git】 &#x1f600; 作  者&#xff1a;我是夜阑的狗&#x1f436; &#x1f680; 个人简介&#xff1a;一个正在努力学技术的CV工程师&#xff0c;专注基础和实战分享 &#xff0c;欢迎咨询&#xff01; &#x1f496; 欢迎大…
阅读更多...
【CSS】CSS三大特性、盒子模型

【CSS】CSS三大特性、盒子模型

目录 CSS三大特性 1、层叠性 2、继承性 3、优先级 盒子模型 1、网页布局的本质 2、盒子模型&#xff08;Box Model&#xff09;组成 3、边框&#xff08;border&#xff09; 3.1、边框的使用 3.2、表格的细线边框 3.3、边框会影响盒子实际大小 4、内边距&#xff0…
阅读更多...
【AUTOSAR网络管理测试】PowerOn→BSM

【AUTOSAR网络管理测试】PowerOn→BSM

&#x1f64b;‍♂️【AUTOSAR网络管理测试】系列&#x1f481;‍♂️点击跳转 文章目录 1.状态机分析2.环境搭建3.测试步骤4.结果分析 1.状态机分析 PowerOn→BSM&#xff1a;上电初始化的&#xff0c;会默认进入BSM状态 测试点&#xff1a;确认上电后&#xff0c;任何唤醒源…
阅读更多...
C语言进阶课程学习记录-第29课 - 指针和数组分析（下）

C语言进阶课程学习记录-第29课 - 指针和数组分析（下）

C语言进阶课程学习记录-第29课 - 指针和数组分析&#xff08;下&#xff09; 数组名与指针实验-数组形式转换实验-数组名与指针的差异实验-转化后数组名加一的比较实验-数组名作为函数形参小结 本文学习自狄泰软件学院 唐佐林老师的 C语言进阶课程&#xff0c;图片全部来源于课…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023