网站网站建设公,网站站内关键词优化,河北手机网站制作企业,淘宝运营培训有必要吗#x1f31f; 前言 欢迎来到我的技术小宇宙#xff01;#x1f30c; 这里不仅是我记录技术点滴的后花园#xff0c;也是我分享学习心得和项目经验的乐园。#x1f4da; 无论你是技术小白还是资深大牛#xff0c;这里总有一些内容能触动你的好奇心。#x1f50d; #x… 前言 欢迎来到我的技术小宇宙 这里不仅是我记录技术点滴的后花园也是我分享学习心得和项目经验的乐园。 无论你是技术小白还是资深大牛这里总有一些内容能触动你的好奇心。 洛可可白个人主页 个人专栏✅前端技术 ✅后端技术 个人博客洛可可白博客 代码获取bestwishes0203 封面壁纸洛可可白wallpaper 文章目录 无缝集成使用Spring Boot和Vue实现头像上传与回显功能技术栈介绍后端实现添加依赖代码注释 前端实现代码注释全局配置封装Axios二次封装Api接口请求 解决CORS跨域问题业务处理代码 功能演示结语 往期精彩回顾 无缝集成使用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来接收上传的文件并将其保存到服务器的指定目录。
添加依赖 dependencygroupIdorg.springframework.boot/groupIdartifactIdspring-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/userconst 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): PromiseUploadRes {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: Recordstring, 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): PromiseUpdateUserRes {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-listfalse :limit1 action# :auto-uploadfalse accept.png:on-changehandleChangesel-icon classel-icon--uploadupload-filled//el-icondiv classel-upload__textem 点击 /em 或em 拖动文件 /em上传/divtemplate #tipdiv classel-upload__tip仅支持 jpg/png 格式文件大小小于 2MB/div/template/el-upload
/templatescript 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;})})})
};
/scriptstyle 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和AssertJYarn简介及Windows安装与使用指南H5实现3D旋转照片墙教程Element-Plus 实现动态渲染图标教程MyBatis-Plus分页接口实现教程Spring Boot中如何编写分页查询Element-Plus下拉菜单边框去除教程
