vue-admin-template开发(头像上传功能)
vue-admin-template开发(头像上传功能)
vue-admin-template是一个后台管理系统的前端框架,提供了登录、导航栏、路由等功能,是一个强大简洁的后台管理系统的前端框架。本文将讲述在 vue-admin-template 的基础上进行二次开发,把 vue-element-admin当做工具箱。
锁定头像上传功能
我们以vue-element-admin的头像上传为例,简单描述如何将头像上传功能移植进入到vue-admin-template中
锁定头像上传功能代码
首先在浏览器导航栏拿到组件路由:/components/avatar-upload,拿着这个路径到src/router/index.js找
在路由表index.js文件中我们能看到以下线索
./modules/components,这个线索提示了我们components组件在当前目录下的./modules/components.js中
在components.js中我们找到了avatar-upload组件线索,avatar-upload组件对应的Vue代码实现在@/views/components-demo/avatarUpload.vue中
<template><div class="components-container"><code>This is based on<a class="link-type" href="//github.com/dai-siki/vue-image-crop-upload"> vue-image-crop-upload</a>.{{ $t('components.imageUploadTips') }}</code><pan-thumb :image="image"/><el-button type="primary" icon="upload" style="position: absolute;bottom: 15px;margin-left: 40px;" @click="imagecropperShow=true">Change Avatar</el-button><image-cropperv-show="imagecropperShow":width="300":height="300":key="imagecropperKey"url="https://httpbin.org/post"lang-type="en"@close="close"@crop-upload-success="cropSuccess"/></div>
</template>
头像上传功能实现效果图
在我个人的项目中,我需要把头像上传功能添加进入讲师管理中的添加讲师功能中。
移植功能
1)添加template代码
2)解决控制台报错问题
这时控制台一共报了9个错误,这些问题的原因在于:我们只移植了template代码,还需要声明变量、方法之类的。接下来我们依次分析问题,一一解决。
解决办法
解决问题的办法在于对照着vue-element-admin项目中的avatarUpload.vue文件,将变量、方法添加进入vue-admin-template项目中的form.vue文件
问题1
该问题表示imagecropperShow变量未声明
问题2
该问题表示imagecropperKey变量未声明
在文件下边的js代码块中,在data()中添加imagecropperShow、imagecropperKey变量声明
问题3
该问题表示close()方法未声明
问题4
该问题表示cropSuccess()方法未声明
在文件下边的js代码块中,在methods:中添加close()方法、cropSuccess()方法声明
问题5
该问题表示模块未找到
问题6
该问题表示模块未找到
导入模块操作1-添加模块文件夹
导入ImageCropper和PanThumb模块,这两个模块是从vue-element-admin中拷贝过来的。
导入模块操作2-添加代码
在文件下边的js代码块中,在下导入ImageCropper和PanThumb模块,在export default 中进行模块声明
问题7
该问题表示close()方法未声明
问题8
该问题表示cropSuccess()方法未声明
问题7和问题8在解决问题3和问题4时一并解决,在解决问题3和问题4时已经声明了close()、cropSuccess()方法
功能实现
经过上面的8个问题的排查,我们成功将控制台中的问题都已经解决,这时候可以看到头像上传功能成功移植。
总结
vue-admin-template是一个能够方便我们开发的后台管理系统的前端框架。经过以上的功能移植流程分析和总结,在接下来的开发中我能够规避大部分的问题。感谢你的阅读,希望这篇文章能对你有小小的帮助。我是黑马Jack,一起学习一起进步!
vue-admin-template开发(头像上传功能)相关推荐
- vue+element ui完成头像上传功能(文件转base64)以及自定义布局。
1.自定义布局 查阅element ui的头像上传功能,发现是点击头像位置才可以上传,那我们可不可以点击头像外部的按钮来上传头像呢? element ui效果图: ...
- vue项目中实现头像上传的功能型组件
@vue项目中实现头像上传的功能型组件 功能需求 实现个人中心的头像上传功能: 1.用户未上传过头像,展示设定好的默认头像(区分男女) 2.支持格式png.jpg.jpeg 3.图片大小:小于等于2M ...
- Vue Admin Template关闭eslint校验,lintOnSave:false设置无效解决办法
目录 第一步:lintOnSave:false 第二步:修改package.json中的配置 最后一步: 使用Vue Admin Template 二次开发是一件非常愉悦的事情,可是它里面的eslin ...
- 前端头像上传功能实现之普通图片/头像上传 详细解析1【扩展知识FormData对象】
上传的图片/头像有两种方案上传 第一种我们不对图片做处理直接上传到服务器端,把图片上传到服务器的img文件夹当中,然后我们把图片的地址信息存储在数据库当中,用图片的时候我们直接调用地址 第二种方案是我 ...
- 仿淘宝头像上传功能(二)——程序篇
目录: 仿淘宝头像上传功能(一)--前端篇. 仿淘宝头像上传功能(二)--程序篇. 仿淘宝头像上传功能(三)--兼容 IE6 浏览器 源码下载: 仿淘宝头像上传并裁剪功能.zip 这里先定义了一个类, ...
- AdminEAP框架-头像上传功能实现
AdminEAP框架 1.概述 AdminEAP为本人基于AdminLTE改造的后台管理框架,包含了基本的系统管理功能和各种交互demo,项目已经开源到Github,并部署到阿里云. Github : ...
- vue admin template开启顶部导航
官网上没有太多的说明 废话不多说,直接上代码 1.复制vue element admin必要组件 AppMain.vue覆盖一下 2.修改一些文件 /src/store/index.js /src/s ...
- 开发文件上传功能稍不注意就会引发安全漏洞
1. 前言 文件上传在日常开发中十分常见,但是潜在的安全问题非常容易忽视.一旦开发中忽视了这些问题,将会引发系统安全漏洞. 2. 文件上传开发的安全建议 通常我们上传的文件是由客户端控制的,这种情况下 ...
- 13 使用Vue + FormData + axios实现图片上传功能实战
前言 上节回顾 上一小节中,我们添加了Vue-router的路有数据,这些数据都将是后续实战课程中的真实路由数据了.同时引入了ElementUI的el-menu做为左侧菜单的组件,但本专栏的特点就是遇 ...
- 前端头像上传功能实现之base64图片/头像上传 详细解析2【扩展知识FileReader对象】
将图片变成base64字符串 base64是一种数据格式 就是一个字符串可以当图片来使用 // base64之将图片在前端变为base64格式 1.先获取图片 2.FileReader对象将图片进行转 ...
最新文章
- Object-c实现各种排序算法 (汇总)
- 后端好书阅读与推荐(续六)
- npm切换到淘宝镜像
- 简单的java多线程源码分享(二)
- 无序数组求第k大的数 python_整数无序数组求第K大数
- iOS项目组件化历程
- IntelliJ IDEA修改项目的根目录名称_修改包目录的名称_修改模块名称_修改项目名称
- 【转】dicom通讯的工作方式及dicom标准简介!!
- java quartz mybatisplus_Springboot+redis+SpringMVC+Mybatis Plus分布式开发系统源码
- 手机通讯加密软件Peerio上架,代码全部开源
- BZOJ 2442 [Usaco2011 Open]修剪草坪:单调队列优化dp
- PHP 100 个最常用的函数
- java infinite or nan,java.lang.NumberFormatException: Infinite or NaN(数学运算错
- mac使用的pd虚拟机window黑屏 ---已解决
- python随机数种子seed()的讲解
- FreeRTOS-消息队列详解
- 电脑无法显示移动硬盘文件内容的解决方法
- java爬虫拉勾网_[Java教程]node.js爬虫爬取拉勾网职位信息
- PHP 获取两个日期的相隔天数
- 7.4.2 解的稳定性、病态矩阵、矩阵条件数