vue-admin-template开发（头像上传功能）

最新推荐文章于 2024-07-10 22:23:41 发布
最新推荐文章于 2024-07-10 22:23:41 发布
阅读量3k 收藏 6
点赞数 1
分类专栏： 技术篇 Java 文章标签： vue js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46991388/article/details/117015841
版权
本文详细介绍了如何将vue-element-admin的头像上传功能移植到vue-admin-template中，包括添加template代码、解决控制台报错问题，如声明imagecropperShow、imagecropperKey变量和close()、cropSuccess()方法，以及导入和声明ImageCropper和PanThumb模块。通过解决8个关键问题，成功实现了头像上传功能。
摘要由CSDN通过智能技术生成

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文件中我们能看到以下线索
components线索

最低0.47元/天 解锁文章
黑马Jack
关注
专栏目录
SpringBoot实现Vue-admin-template登录.docx
06-27
总之，实现`Vue-admin-template`的登录功能，需要前后端协同工作。前端负责发起登录请求，处理响应，存储和使用token；后端则需要设计和实现验证登录的接口，以及提供获取用户信息的接口。理解这两个接口的交互细节...
vue前端完成头像上传
weixin_44884861的博客
08-13 4300
vue前端代码实现头像上传 1.创建项目，使用vue-admin-template框架 使用vue命令在终端（开发工具VScode）输入npm install,即可按package.json文件下载 导入相关工具包，是上传头像的样式更好看 4.在views编写vue文件 <template> <div class="app-container"> <el-form-item label="讲师头像"> <el-upload
vue-element-admin上传头像组件复用
joke博客
09-19 528
官方说了推荐大家使用官方版本,因为他也是整合别人的官方地址 引入组件 在\src\components下找到ImageCropper, PanThumb 这两个文件夹,拷到自己的项目里, 写代码 直接看着官方的案例改 找到\src\views\components-demo\avatar-upload.vue 所有的内容都要拷到你的代码里,位置看着放. 重点在image-cropper这个组件...
vue-admin-template之右上角logo换成自定义照片
最新发布
YGGZZZ的博客
07-10 225
vue-admin-template之右上角logo换成自定义照片
ElementUI组件之头像上传, 并储存在后端服务器
Leonnnn2020的博客
05-07 1667
ElementUI头像上传功能实现
【springboot+vue项目（三）】后台管理系统模板vue-admin-template 的使用
shanglin1122的博客
06-28 3427
├── build/ # 构建脚本├── mock/ # 模拟数据├── public/ # 静态资源│ ├── favicon.ico # 网站图标│ └── index.html # 入口页面├── src/ # 项目源码│ ├── api/ # API 请求封装│ ├── assets/ # 静态资源│ ├── components/ # 公共组件│ ├── directive/ # 自定义指令│ ├── filters/ # 过滤器│ ├── icons/ # 图标。
element 封装上传图片，上传头像组件
bannerpink的博客
06-20 376
封装vue上传头像，上传组件
vue-admin-template:Vue轻量级后台管理系统基础模板
03-11
Vue轻量级后台管理系统基础模板 相关依赖 功能 登录页 一周七天自动切换不同的壁纸（建议自己配置） 标签栏 点击标签切换页面 刷新当前标签页 关闭其他标签/关闭所有标签 注意：组件的名称和路由的名称一定要一致，...
vue-element-template实战案例
04-30
它集成了很多常用的开发工具和技术，如 Vuex、Vue Router、axios 等，可以快速搭建一个功能完备的后台管理系统。 #### 二、项目结构与组织 在构建 `vue-element-template` 时，通常会将项目分为不同的模块和组件，...
基于vue-admin-template的hexo博客后台管理，项目采用SpringBoot+Vue+源代码+文档说明
11-28
- 头像上传 - 系统参数设置 √ - 增加统计功能，比如文章数、评论数、用户数等等，并增加图表展示 - 评论邮件通知 √ - 管理员回复 ## 项目备注 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请...
admin-template-role:带权限的框架
03-19
cd vue-admin-template # 安装依赖 npm install # 启动服务 npm run dev 浏览器访问 发布 # 构建测试环境 npm run build:stage # 构建生产环境 npm run build:prod 其他 # 预览发布环境效果 npm run preview # 预览...
vue后台管理图片上传
qq_54588073的博客
04-06 182
【代码】vue后台管理图片上传。
vue+element ui完成头像上传功能（文件转base64）以及自定义布局。
weixin_47192981的博客
02-01 3891
2.2通过on-change来监控传入文件的状态，当上传的文件大小（beforeAvatarUpload函数）以及格式（html代码里面的accept属性）达到了我们的目标要求后就可以将文件进行转换，之后在传给后端。查阅element ui的头像上传功能，发现是点击头像位置才可以上传，那我们可不可以点击头像外部的按钮来上传头像呢？当我们明白每个标签的含义之后，我们就可以通过调整img标签的位置来达到自己的目标效果。下图为目标效果图的代码：html+css布局。2、文件转base64（html代码见上图）
从0开始写Vue项目-Vue实现用户个人信息界面上传头像
不愧是暮言的博客
02-24 5766
都知道，我们在写项目的时候，最想给自己项目增加实用性了，例如我们的头像上传以及个人的各种信息等等。我们刚刚已经做好了我们的上传接口，那么我们现在就趁热打铁，将我们的头像上传功能解决一下。二、个人信息界面我们的个人信息界面由我们的头像以及我们的表格组成，那么就说明我们需要去获取我们用户的数据了我们之前是做过用户数据存储的，就是利用token来将我们用户的数据存放在我们的浏览器里面，然后利用来查找出我们的用户数据。三、头像上传对于头像上传，我们依然用到我们之前的接口和组件来实现该功能。
vue uni-app 裁剪图片(裁剪头像)插件vue-image-cropper
PrimaryColor
02-01 6955
一、项目预览。 效果： 一个手指拖动，可以移动图片，两个手指拖动可以缩放。 下载该项目： git clone https://github.com/Q956164483/vue-image-cropper.git 运行： npm i cdvue-image-cropper npm run serve 二、应用在自己的项目。 1.复制“vue-image-cropper”项目中的 ./src/components/imageCropper.vue文件 (imageCroppe.
vue-admin-template 表单显示图片
m0_60459392的博客
10-29 567
<el-table-column label="图片" width="100" align="center"> <template slot-scope="scope"> <el-image style="width: 80px; height: 80px; border-radius: 10%" :src="scope.row.item_img" fit="cover"></el-image> <.
基于springboot & vue-admin-template 框架下的前后端分离开发，《文件上传》业务逻辑与el-upload组件详解，静态路径与动态路径
Rookie_Gyt的博客
04-09 745
这是由于当npm启动之后项目访问的都是声明在static中的路径，这个static类似于后端的target(编译结果文件夹)，在static中找绝对路径当然找不到。1、调用位于vue-project中的静态路径：首先需要将图片存放在vue-project中的assets文件夹下。来回显图片，但是当src指向的路径为动态是,即项目开始后再传入路径则会出现。2、调用后端的静态路径(声明在target目录下的文件)不使用action方法也是可以的，此时我们需要用。上代码，这时候调用api下的接口路径就好。
尚医通（六）前端页面搭建说明 | vue-element-admin
Knight
02-07 1333
尚医通（六）前端页面搭建说明 | vue-element-admin
vue-admin-template 右上角的logo图片怎么换成用户自己的头像呢
zjp1310343359的博客
03-19 1208
网上查到说好像是在这里改，我自己是用nginx配置把文件上传到本地文件夹下的。请教一下如何把用户的头像替换掉右上角logo处的图片呢。数据库里的图片的存储信息是这样的。
vue-admin-template上传头像
08-26
要在vue-admin-template中实现上传头像功能，可以参考vue-element-admin中的实现方法。首先，需要将头像上传组件的代码从vue-element-admin的avatarUpload.vue文件中提取出来。然后，将这些代码添加到vue-admin-template中的form.vue文件中。具体步骤如下： 1. 打开vue-element-admin项目中的avatarUpload.vue文件，查找头像上传组件的代码。 2. 将这些代码复制到vue-admin-template项目中的form.vue文件中的合适位置。 3. 需要注意根据具体需求进行相应的修改，可能需要调整组件的样式、路径或者其他属性。 4. 根据vue-admin-template的文件目录结构和组件引用方式，确保头像上传组件的路径和引用方式正确无误。 5. 保存文件并重新编译运行vue-admin-template项目，确保上传头像功能已经成功添加。 通过以上步骤，你就可以将vue-element-admin中的头像上传功能移植到vue-admin-template中了。请根据具体情况进行调整和修改。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [vue-admin-template开发（头像上传功能）](https://blog.csdn.net/m0_46991388/article/details/117015841)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

黑马Jack

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值