引进Menu菜单与新增验证上传图片功能--系统篇

        我的迭代小系统要更新2点。一是后台需要引进一种导航，众多导航之中我选择了Menu菜单。二是上传图片接口需要新增验证上传图片环节。先看看更新2点后的效果

        引进Menu菜单效果如下，这部分修改后台前端代码

        引进Menu菜单后，Menu菜单的默认数据我还没处理，先把第一项一级菜单下的第一项二级菜单改名为上传图片，然后设置为初始选中菜单，然后把vue的v型logo删掉，将剩下的上传按钮和提示放到上传图片菜单对应的响应页面中，接下来看看代码

<script lang="ts" setup>

import type {MenuItemRegistered} from 'element-plus'
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'

const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}

const selectEvent=(obj:MenuItemRegistered)=>{
  console.log(obj.index)
}

</script>

<template>
    <el-row class="tac">
        <el-col :span="6">
          <h5 class="mb-2">Default colors</h5>
          <el-menu
            router
            default-act