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

🌟 前言

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

  • 🤖 洛可可白：个人主页

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

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

  • 🐱 代码获取：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.mzph.cn/news/807917.shtml

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

相关文章

查询category的id存在于项目表中category_id_list的json array字段中

查询category的id存在于项目表中category_id_list的json array字段中

表category 表project 查询category的id存在于项目表中category_id_list的json array字段中。
阅读更多...
4.11Qt

4.11Qt

完善网络聊天室客户端实现 工程文件 QT core gui network 头文件 #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QTcpSocket> #include<QMessageBox>QT_BEGIN_NAMESPACE namespace Ui { class Widget; } QT_END_NAMESPACEcl…
阅读更多...
前端三剑客 —— JavaScript （第九节）

前端三剑客 —— JavaScript （第九节）

目录 内容回顾&#xff1a; 1.事件解除 2. Ajax jQuery选择器 回顾CSS选择器 CSS选择 1.基本选择器 2.包含选择器 3.伪类选择器 4.伪元素选择器 5.属性选择器 jQuery 库 jQuery 动画 系统动画 自定义动画 常见API操作 内容回顾&#xff1a; 1.事件解除 如果是使…
阅读更多...
头歌-机器学习 第9次实验 随机森林

头歌-机器学习 第9次实验 随机森林

第1关&#xff1a;Bagging 任务描述 本关任务&#xff1a;补充 python 代码&#xff0c;完成 BaggingClassifier 类中的 fit 和 predict 函数。请不要修改 Begin-End 段之外的代码。 相关知识 为了完成本关任务&#xff0c;你需要掌握&#xff1a; 什么是 Bagging&#xf…
阅读更多...
李廉洋；4.11#黄金，WTI原油#行情走势分析策略。

李廉洋；4.11#黄金，WTI原油#行情走势分析策略。

美国银行预计&#xff0c;在今天召开的欧洲央行会议上不会有重大的政策变化&#xff0c;但欧洲央行正逐渐接近开始降息&#xff0c;尽管它采取的是一种谨慎的、依赖数据的方式。虽然欧洲央行对降息轨迹的信心不断增强&#xff0c;但降息的具体速度和幅度仍未公布&#xff0c;而…
阅读更多...
QT系列教程(2) 创建项目和编译

QT系列教程(2) 创建项目和编译

新建Qt Widgets应用 我们启动qt creator 创建项目&#xff0c;选择Qt Widgets应用 接下来选择项目目录&#xff0c;项目名字就叫helloworld 构建系统选择qmake 我们创建一个名字为HelloDialog的类&#xff0c;继承于QDialog 构建套件选择你们安装的就行了&#xff0c;我这里选…
阅读更多...
ELK及ELFK排错

ELK及ELFK排错

目录 一、ELK及ELFK排错思路 1.1filebeat侧排查 1.2logstash侧排查 1.3ES、kibana侧问题 一、ELK及ELFK排错思路 1.1filebeat侧排查 第一步&#xff1a;排查filebeat上的配置文件有没有写错&#xff0c;filebeat的配置文件是yml文件&#xff0c;一定要注意格式。 第二步…
阅读更多...
python botos s3 aws

python botos s3 aws

https://boto3.amazonaws.com/v1/documentation/api/latest/reference/services/s3.html AWS是亚马逊的云服务&#xff0c;其提供了非常丰富的套件&#xff0c;以及支持多种语言的SDK/API。本文针对其S3云储存服务的Python SDK&#xff08;boto3&#xff09;的使用进行介绍。 …
阅读更多...
男生裤子怎么选？5条永远不会出错的长裤分享

男生裤子怎么选？5条永远不会出错的长裤分享

作为一名热衷于分享日常穿搭的博主&#xff0c;我在后台收到了很多粉丝的询问&#xff0c;大家都休息知道哪个品牌的裤子质量更好&#xff0c;而且风格能够适合男生。而且我注意到很多粉丝习惯于在网红直播间下单&#xff0c;对裤子的品牌以及基本品质并不够了解&#xff0c;所…
阅读更多...
suno有了新对手udio炸裂音乐圈；又一个开源AI Devin 程序员；完全开源轻量级的文本到语音可生成特定说话者的风格

suno有了新对手udio炸裂音乐圈；又一个开源AI Devin 程序员；完全开源轻量级的文本到语音可生成特定说话者的风格

✨ 1: udio 由音乐和科技界重量级人物支持的强大 AI 音乐生成器&#xff0c;被称为音乐界的另一个 ChatGPT。 Udio 由前 Google DeepMind的研究院和工程师创立&#xff0c;得到了a16z的支持&#xff0c;总部在伦敦和纽约。 目前是一个免费的V1测试版产品&#xff0c;每个人每…
阅读更多...
缺失msvcr110.dll要怎么处理？快捷的修复msvcr110.dll方法

缺失msvcr110.dll要怎么处理？快捷的修复msvcr110.dll方法

当你在使用电脑进行工作或娱乐时&#xff0c;可能会突然遇到一个错误提示&#xff1a;“程序无法启动&#xff0c;因为电脑中缺失msvcr110.dll”。这样的情况不仅会打断你的活动&#xff0c;还可能带来一定程度的不便。面对这个在Windows操作系统中相对常见的问题&#xff0c;其…
阅读更多...
在隐私计算应用中和数链具备哪些技术特点？

在隐私计算应用中和数链具备哪些技术特点？

在加速“可信数字化”进程的背景下&#xff0c;我国区块链产业将在打造新型平台经济&#xff0c;开启共享经济新时代的同时&#xff0c;带动数字经济“脱虚向实”服务实体经济。 和数软件在加速数字化进程的同时&#xff0c;进一步服务实体经济&#xff0c;提高实体经济的活力…
阅读更多...
抖音IP打造品牌规划流量运营方案推广计划书

抖音IP打造品牌规划流量运营方案推广计划书

【干货资料持续更新&#xff0c;以防走丢】 抖音IP打造品牌规划流量运营方案推广计划书 部分资料预览 资料部分是网络整理&#xff0c;仅供学习参考。 50页可编辑&#xff08;完整资料包含以下内容&#xff09; 目录 详细的抖音运营方案&#xff0c;帮助品牌在抖音平台上提升…
阅读更多...
如何切换PHP版本

如何切换PHP版本

如果服务器上安装了多个php&#xff0c;可能会导致默认的php版本错误&#xff0c;无法启动swoole等服务&#xff0c; 查看命令行的php版本方法&#xff1a;https://q.crmeb.com/thread/9921 解决方法如下&#xff0c;选一个即可&#xff1a; 一、切换命令行php版本&#xff0c…
阅读更多...
3d怎么按路径制作模型---模大狮模型网

3d怎么按路径制作模型---模大狮模型网

在3D建模中&#xff0c;按路径制作模型是一种常见的技术&#xff0c;特别适用于创建曲线、管道、绳索等线性形状的物体。虽然这项技术可能对初学者来说有些复杂&#xff0c;但通过一步步的指导和实践&#xff0c;你将能够掌握它。本文将详细介绍按路径制作模型的步骤&#xff0…
阅读更多...
宁盾radius认证服务器软件如何实现802.1X认证/Portal认证上网（portal web入网认证）

宁盾radius认证服务器软件如何实现802.1X认证/Portal认证上网（portal web入网认证）

一、什么是802.1X认证和Portal认证以及有什么区别 随着企业网络规模的不断扩大和网络安全威胁的日益加剧&#xff0c;有效的网络认证机制成为保障网络安全的关键。其中&#xff0c;802.1X认证和Portal认证是两种常见的网络认证方式&#xff0c;它们各有特点&#xff0c;适用于…
阅读更多...
手动实现简易版RPC(下)

手动实现简易版RPC(下)

手动实现简易版RPC(下) 前言 什么是RPC&#xff1f;它的原理是什么&#xff1f;它有什么特点&#xff1f;如果让你实现一个RPC框架&#xff0c;你会如何是实现&#xff1f;带着这些问题&#xff0c;开始今天的学习。 接上一篇博客 手动实现简易版RPC&#xff08;上&#xff…
阅读更多...
【git】为什么git要有 暂存区

【git】为什么git要有 暂存区

关于git暂存区的个人理解 暂存区 一般存放在 .git 目录下的 index 文件&#xff08;.git/index&#xff09;中。 git中的修改需要先add到暂存区&#xff0c;再commit到本地库&#xff0c;乍一看好像是多此一举了。 看了些别人的讨论&#xff0c;自己也想了很久&#xff0c;…
阅读更多...
二叉树应用——最优二叉树（Huffman树）、贪心算法—— Huffman编码

二叉树应用——最优二叉树（Huffman树）、贪心算法—— Huffman编码

1、外部带权外部路径长度、Huffman树 从图中可以看出&#xff0c;深度越浅的叶子结点权重越大&#xff0c;深度越深的叶子结点权重越小的话&#xff0c;得出的带权外部路径长度越小。 Huffman树就是使得外部带权路径最小的二叉树 2、如何构造Huffman树 &#xff08;1&#xf…
阅读更多...
【每日刷题】Day10

【每日刷题】Day10

【每日刷题】Day10 &#x1f955;个人主页&#xff1a;开敲&#x1f349; &#x1f525;所属专栏&#xff1a;每日刷题&#x1f345; 目录 1. 环形链表的约瑟夫问题_牛客题霸_牛客网 (nowcoder.com) 2. 21. 合并两个有序链表 - 力扣&#xff08;LeetCode&#xff09; 3. 152…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023