位置: IT常识 - 正文

vue+element ui完成头像上传功能(文件转base64)以及自定义布局。(vue element ui)

编辑:rootadmin
vue+element ui完成头像上传功能(文件转base64)以及自定义布局。

推荐整理分享vue+element ui完成头像上传功能(文件转base64)以及自定义布局。(vue element ui),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:elementui基于vue,vue element ui教程,vue3 element ui,vue中elementui怎么用,vue3 element ui,vue element ui,vue3 element ui,vue element ui,内容如对您有帮助,希望把文章链接给更多的朋友!

1、自定义布局

      查阅element ui的头像上传功能,发现是点击头像位置才可以上传,那我们可不可以点击头像外部的按钮来上传头像呢?

element ui效果图:                                                   目标效果:

vue+element ui完成头像上传功能(文件转base64)以及自定义布局。(vue element ui)

                         

 在实现之前要明白element ui里面代码的含义:

//el-upload是用来控制图片上传,里面有相关属性。<el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload"> //img的是存放上传图片位置的地方 <img v-if="imageUrl" :src="imageUrl" class="avatar"> <i v-else class="el-icon-plus avatar-uploader-icon"></i></el-upload>

 当我们明白每个标签的含义之后,我们就可以通过调整img标签的位置来达到自己的目标效果。

下图为目标效果图的代码:html+css布局

<div class="touxiang">//把存放头像单独拿出来,放到一个div中,通过css布局来调整位置 <div class="pic"> <img v-if="imageUrl" :src="imageUrl?''+imageUrl:'@/assets/avatar.gif'" class="avatar" /> <i v-else class="el-icon-plus avatar-uploader-icon"></i> </div> <el-upload class="avatar-uploader" list-type="picture" ref="upload" accept=".jpg, .png" :limit="1" :auto-upload="false" :show-file-list="false" :file-list="fileList" :on-change="getFile"> //点击上传的按钮一定要在el-upload内部才可以实现 <el-button size="small" type="primary">点击上传</el-button> <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过2MB</div> </el-upload></div>.touxiang { margin: 30px auto 30px 150px; display: flex; .avatar-uploader { ::v-deep .el-upload { margin-top: 5px; height: 45px; display: flex; flex-direction: column; align-content: space-between; } ::v-deep .el-button { width: 90px; height: 35px; font-size: 15px; } } .pic { margin-right: 20px; border-radius: 50%; border: 1px dashed gray; .avatar-uploader-icon { font-size: 28px; color: #8c939d; width: 80px; height: 80px; line-height: 80px; text-align: center; } .avatar { border-radius: 50%; width: 80px; height: 80px; display: block; } }}

2、文件转base64(html代码见上图)

2.1先定义好需要用到的变量

data() { return { // 上传头像地址 imageUrl: '', //接收上传的文件 fileList:[], }; },

2.2通过on-change来监控传入文件的状态,当上传的文件大小(beforeAvatarUpload函数)以及格式(html代码里面的accept属性)达到了我们的目标要求后就可以将文件进行转换,之后在传给后端。

// 头像上传 getFile(file, fileList) { if(this.beforeAvatarUpload(file)){ this.getBase64(file.raw).then(res => { this.imageUrl = res; //ruleForm是我接收后端传过来的数据,此处可以忽略 this.ruleForm.imagePath=res }) } },//这里是文件转base64 getBase64(file) { return new Promise(function (resolve, reject) { const reader = new FileReader() let imgResult = '' reader.readAsDataURL(file) reader.onload = function () { imgResult = reader.result } reader.onerror = function (error) { reject(error) } reader.onloadend = function () { resolve(imgResult) } }) }, beforeAvatarUpload(file) { const isLt2M = file.size / 1024 / 1024 < 2; if (!isLt2M) { this.$message.error('上传头像图片大小不能超过 2MB!'); } return isLt2M; },

到这里文章就结束啦,希望可以对您有所帮助!

本文链接地址:https://www.jiuchutong.com/zhishi/296153.html 转载请保留说明!

上一篇:怎么让 echarts 图表动起来?定时器解决它 —— 大屏展示案例(动态仪表盘、动态柱状图)(echarts怎么样)

下一篇:vue3与vue2的对比(vue3与vue2的区别)

  • 什么软件能看电视频道(什么软件能看电视)

    什么软件能看电视频道(什么软件能看电视)

  • 手机不能接电话和收短信了,怎么办(手机不能接电话怎么办)

    手机不能接电话和收短信了,怎么办(手机不能接电话怎么办)

  • 抖音怎么得万能卡(抖音怎么万能卡)

    抖音怎么得万能卡(抖音怎么万能卡)

  • 回收站是内存临时空间的一部分吗(回收站的内存是固定不变的吗)

    回收站是内存临时空间的一部分吗(回收站的内存是固定不变的吗)

  • 浪花直播ios版怎么下载(浪花直播ios版怎么看)

    浪花直播ios版怎么下载(浪花直播ios版怎么看)

  • 聊天记录删除了能找回来吗(聊天记录删除了怎么恢复微信)

    聊天记录删除了能找回来吗(聊天记录删除了怎么恢复微信)

  • 华为大光圈适合拍什么(华为大光圈模式原理)

    华为大光圈适合拍什么(华为大光圈模式原理)

  • 电脑已接通电源未充电怎么回事(电脑已接通电源0%)

    电脑已接通电源未充电怎么回事(电脑已接通电源0%)

  • 抖音信息删除能找回吗(抖音信息删除能查到吗)

    抖音信息删除能找回吗(抖音信息删除能查到吗)

  • 网络正常,但网页打不开(网络正常但网页无法打开)

    网络正常,但网页打不开(网络正常但网页无法打开)

  • 抖音里的歌怎么查歌名(抖音里的歌怎么弄出来)

    抖音里的歌怎么查歌名(抖音里的歌怎么弄出来)

  • 骁龙660是几纳米工艺(骁龙660是几纳米制程)

    骁龙660是几纳米工艺(骁龙660是几纳米制程)

  • 淘宝详情页图片尺寸多少(如何制作淘宝详情页图片)

    淘宝详情页图片尺寸多少(如何制作淘宝详情页图片)

  • 书旗小说自动续费怎么关(书旗小说自动扣费怎么关闭)

    书旗小说自动续费怎么关(书旗小说自动扣费怎么关闭)

  • 孑然一身是什么意思(孑然一身是什么生肖)

    孑然一身是什么意思(孑然一身是什么生肖)

  • 华为开机密码忘记怎么解锁(华为开机密码忘了怎么办,教你一招,1分钟就搞定)

    华为开机密码忘记怎么解锁(华为开机密码忘了怎么办,教你一招,1分钟就搞定)

  • 苹果xs支持屏下指纹吗(苹果xs屏幕支持几点触控)

    苹果xs支持屏下指纹吗(苹果xs屏幕支持几点触控)

  • 抖音聊天撤回对方知道吗(抖音聊天撤回对方还有记录吗?)

    抖音聊天撤回对方知道吗(抖音聊天撤回对方还有记录吗?)

  • 三星手机开不了机怎么办(三星手机开不了机怎么导出数据)

    三星手机开不了机怎么办(三星手机开不了机怎么导出数据)

  • 三星s10怎么开空调(三星s10开关机在哪里设置)

    三星s10怎么开空调(三星s10开关机在哪里设置)

  • 苹果x怎么设置刘海特效(苹果x怎么设置指纹密码锁屏)

    苹果x怎么设置刘海特效(苹果x怎么设置指纹密码锁屏)

  • 网段与lan口ip地址冲突(网段与lan口ip地址冲突怎么解决)

    网段与lan口ip地址冲突(网段与lan口ip地址冲突怎么解决)

  • 小米商城电子发票在哪(小米商城电子发票怎么开)

    小米商城电子发票在哪(小米商城电子发票怎么开)

  • 5g是换手机卡还是手机(5g是换手机卡还是换手机)

    5g是换手机卡还是手机(5g是换手机卡还是换手机)

  • 为什么搜索手机号找不到微信(为什么搜索手机号搜不到微信)

    为什么搜索手机号找不到微信(为什么搜索手机号搜不到微信)

  • 草地上的罂粟和矢车菊,德国北莱茵-威斯特法伦州 (© imageBROKER/Alamy)(罂粟是不是草果)

    草地上的罂粟和矢车菊,德国北莱茵-威斯特法伦州 (© imageBROKER/Alamy)(罂粟是不是草果)

  • 税前弥补以前年度亏损例
  • 中国税务师协会税务师官网
  • 企业对外付汇怎么入账
  • 滞纳金按年怎么算
  • 在网上怎么预约办健康证
  • 房地产企业汇算清缴
  • 营业以后再次装修进什么会计科目?
  • 期初建账以前年度损益调整怎么转?
  • 砂石的资源税怎么算
  • 技术服务年费是什么
  • 房产税税率2023税率表
  • 怎么导出全年开奖记录
  • 车间扫帚存放架子
  • 无形资产盘盈
  • 盈余公积补亏影响资产吗
  • 企业计提的安全生产费用年末应如何处理
  • 出纳如何审核报销发票
  • 收到的会费计入什么会计科目
  • 应付暂估应在何时申报
  • 代扣代缴增值税怎么申报
  • 银行承兑汇票没有提示付款
  • 材料采购费用的是
  • 升级声卡驱动后声音禁用了怎么恢复
  • 支付境外特许权许可使用费资料
  • 销售设备并提供安装服务增值税税率
  • php开发用什么ide
  • 无法启用网络发展
  • 公司买了一辆二手汽车,怎么入账
  • win11怎么双击直接打开程序
  • dl是什么文件
  • PHP:get_meta_tags()的用法_url函数
  • 货款已预付会计分录
  • 网速第一的国家
  • 美轮美奂的对象是什么
  • 往境外支付培训费怎么退
  • opencv 边缘检测
  • javascript常用的数据类型
  • linuxshel
  • 微信自定义菜单在哪里
  • 其他应付款包括应付股利和应付利息吗
  • 工会经费计提按应付职工薪酬借方还是贷方?
  • 织梦百科
  • 新办商贸企业是国企吗
  • 收到固定资产抵账账务处理
  • 一般纳税人增值税减免政策2023
  • 小规模纳税人企业所得税怎么算
  • 中级会计考试时间
  • 小商户怎么打发票
  • 微信收款会计分录怎么写
  • 记账凭证分类
  • 银行扣款后又退回怎么办
  • 生产用品采购怎么购买的
  • 刷信用卡的手续费一般是多少
  • 外资企业贷款条件
  • 发现以前年度增值税附表2填写错了那时增值税是0
  • 饭店卖烟酒需要什么手续
  • sql server触发器的编写与使用
  • 怎样让windows media player播放mkv文件
  • linux谷歌浏览器安装指令
  • centos6.10修改主机名
  • windows XP+Fedora 8+solaris 11三系统安装攻略
  • 如何使用光盘做启动盘
  • ubuntu系统如何
  • linux scp命令的用法详解
  • hosts文件位置在哪
  • 打开安全启动
  • GhostXP_SP3活力版V3.0_系统之家首发
  • xp系统升级成win7还会卡吗
  • 电脑qq语音界面
  • win7共享文件夹设置访问权限
  • Linux安装完mysql后提示错误无法登陆mysql怎么办?
  • combobox 添加选项
  • windows安装python pip
  • jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)
  • 移交税务稽查的条件标准
  • 税控盘换新会影响旧盘数据吗
  • 财产租赁包括哪些财产
  • 国家税务总局办公室电话
  • 年度申报个人所得税专项扣除多填了怎么办
  • 天津市各区国税局待遇一样吗?
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设