基于SpringBoot和Vue实现头像上传与回显功能

        <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 "图片上传失败";
    }
}

// config/index.ts
export const baseurl = '/api'; // 基础url
export const timeout = 10000; // 请求超时时间
export const headers = { 'x-custom-header': 'foobar' }; // 自定义请求头

// request/index.ts
const request = axios.create({
    // 配置axios实例
    baseurl,
    timeout,
    headers
});
// 添加请求和响应拦截器
request.interceptors.request.use((config) => {
    // 请求拦截器逻辑
    return config;
}, (error) => {
    // 响应拦截器逻辑
    return promise.reject(error);
});

//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);
}

// 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>