当前位置：首页 > news >正文

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

news 2025/7/14 3:15:07

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

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

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

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-active="/addImage"
   class="el-menu-vertical-demo"
   @open="handleOpen"
   @close="handleClose"
   >
   <el-sub-menu index="1">
   <template #title>
   <el-icon><location /></el-icon>
   <span>Navigator One</span>
   </template>
   <el-menu-item-group title="Group One">
   <el-menu-item index="/addImage" @click="selectEvent">上传图片</el-menu-item>
   <el-menu-item index="/users/abc/posts/123">item two</el-menu-item>
   </el-menu-item-group>
   <el-menu-item-group title="Group Two">
   <el-menu-item index="1-3">item three</el-menu-item>
   </el-menu-item-group>
   <el-sub-menu index="1-4">
   <template #title>item four</template>
   <el-menu-item index="1-4-1">item one</el-menu-item>
   </el-sub-menu>
   </el-sub-menu>
   <el-menu-item index="2">
   <el-icon><icon-menu /></el-icon>
   <span>Navigator Two</span>
   </el-menu-item>
   <el-menu-item index="3" disabled>
   <el-icon><document /></el-icon>
   <span>Navigator Three</span>
   </el-menu-item>
   <el-menu-item index="4">
   <el-icon><setting /></el-icon>
   <span>Navigator Four</span>
   </el-menu-item>
   </el-menu>
   </el-col>
       <el-col :span="18">
       <router-view></router-view>
       </el-col>
   </el-row>

</template>

</style>
代码内容很多，不过很多都是和这次更新菜单无关，现在我挑出改动部分介绍

把第一项一级菜单下的第一项二级菜单改名为上传图片，关注如下代码

<el-menu-item index="/addImage" @click="selectEvent">上传图片</el-menu-item>

设置初始选中菜单，关注如下代码

default-active="/addImage"

将上传按钮和提示放到上传图片菜单对应的响应页面中，关注如下代码

        <el-col :span="18">
       <router-view></router-view>
       </el-col>

最后再说下，导航是非常重要的东西。如果说在一个技术框架中写个上传功能，对于进阶期只能算是初期的修炼，因为上传功能只是一个功能，当您需要写第2个功能时，2个功能会混在一个页面，久而久之，当您需要快速寻回某一个功能时反而变得很艰难，进阶期初期的修炼成果就不大了，不牢固了。而导航就是解决问题的关键，会使得进阶期初期的修炼成果得到提升，导航可以认为是进阶期中期的东西，对初期成果有提升作用。进阶期后期才是整合功能的时候，修炼初期没必要强行去整合功能到一个页面。

新增验证图片功能效果如下，这部分后台前端代码没变，仅修改后台后端代码

注意到按钮下面的提示文字，提示只允许jpg和png图片上传，还要求大小要在500KB以下，代码如下

public function upload()
{
$head = new Head2;

$files = request()->file();
try {
validate(['image'=>'fileSize:512000'
. '|fileExt:png,jpeg,jpg|fileMime:image/png,image/jpeg'])
->check($files);

$file = request()->file('image');

$savename = \think\facade\Filesystem::disk('public')
->putFile( 'topic', $file);

$head->name = $savename;
$head->save();
$head_id = $head->getKey();

return mySuccessResponse([
'id' => $head_id,
'name' => $savename,
'url' => Config::get('app.server_url').'storage/'.$savename
]);

} catch (\think\exception\ValidateException $e) {
return myFailResponse(1, $e->getMessage());
}

}

新增验证图片功能，关注如下代码

validate(['image'=>'fileSize:512000'
. '|fileExt:png,jpeg,jpg|fileMime:image/png,image/jpeg'])
->check($files);

还有一个改变是将直接写的域名归到配置文件中配置，然后再引用，这样做有利于用开发机以外设备进行测试，只需要更改域名为IP。如果要考虑好处，那么将系统部署到多个地方，也缩短域名修改时间等等，关注代码如下

'url' => Config::get('app.server_url').'storage/'.$savename

查看全文

http://www.lryc.cn/news/466944.html