位置: 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的区别)

  • 米兔儿童学习手表5X支持安装微信吗(米兔儿童手表使用教程)

    米兔儿童学习手表5X支持安装微信吗(米兔儿童手表使用教程)

  • 美团众包怎么加入(美团众包怎么加入站点对话)

    美团众包怎么加入(美团众包怎么加入站点对话)

  • 芒果tv会员怎么共享给朋友(芒果tv会员怎么给别人用)

    芒果tv会员怎么共享给朋友(芒果tv会员怎么给别人用)

  • 怎么清朋友圈发的东西(如何清理朋友圈里朋友发的内容和图片)

    怎么清朋友圈发的东西(如何清理朋友圈里朋友发的内容和图片)

  • 华为手机的返回键不见了怎么办(华为手机的返回键怎么隐藏起来)

    华为手机的返回键不见了怎么办(华为手机的返回键怎么隐藏起来)

  • 苹果原装线不支持此配件(苹果原装线不支持第三方快充)

    苹果原装线不支持此配件(苹果原装线不支持第三方快充)

  • 抖音一个账号可以登两个手机嘛(抖音一个账号可以登录几个手机)

    抖音一个账号可以登两个手机嘛(抖音一个账号可以登录几个手机)

  • 微信显示有被盗风险登不上去(微信显示有被盗嫌疑怎么解除)

    微信显示有被盗风险登不上去(微信显示有被盗嫌疑怎么解除)

  • 重装系统进USB还是进UEFI

    重装系统进USB还是进UEFI

  • windows中的窗口类型有几种(windows中的窗口主要由什么组成)

    windows中的窗口类型有几种(windows中的窗口主要由什么组成)

  • 主板都自带声卡吗(主板自带声卡和独立声卡的区别)

    主板都自带声卡吗(主板自带声卡和独立声卡的区别)

  • word的页边距可以通过什么设置(word中的页边距)

    word的页边距可以通过什么设置(word中的页边距)

  • 安卓微信号怎么修改(安卓微信号怎么申请第二个)

    安卓微信号怎么修改(安卓微信号怎么申请第二个)

  • 手机qq名片怎么弄空白(手机qq名片怎么变成透明)

    手机qq名片怎么弄空白(手机qq名片怎么变成透明)

  • lonal00是华为什么型号手机(华为lonal00手机报价)

    lonal00是华为什么型号手机(华为lonal00手机报价)

  • pr视频过渡效果怎么加(PR视频过渡效果)

    pr视频过渡效果怎么加(PR视频过渡效果)

  • iphone11什么时候开卖(iPhone11什么时候更新ios17)

    iphone11什么时候开卖(iPhone11什么时候更新ios17)

  • 手机qq系统设置在哪里(手机qq 设置)

    手机qq系统设置在哪里(手机qq 设置)

  • 手机做表格用什么软件(手机做表格什么软件好)

    手机做表格用什么软件(手机做表格什么软件好)

  • 美拍如何导入本地视频(美拍怎么导入照片)

    美拍如何导入本地视频(美拍怎么导入照片)

  • 苹果手机短信显示已送达什么意思(苹果手机短信显示尚未发送)

    苹果手机短信显示已送达什么意思(苹果手机短信显示尚未发送)

  • 如何解决Windows10纯净版删除文件时没有确认?(如何解决windows蓝屏问题)

    如何解决Windows10纯净版删除文件时没有确认?(如何解决windows蓝屏问题)

  • 冬日里的科赫尔湖,德国巴伐利亚州 (© Reinhard Schmid/eStock Photo)

    冬日里的科赫尔湖,德国巴伐利亚州 (© Reinhard Schmid/eStock Photo)

  • 2023年印花税税率口诀
  • 纳税人办理退税流程
  • 土地增值税常见问题及解答
  • 劳务公司的个税如何申报
  • 公司给个人分红会计分录
  • 收入与支出的差异
  • 做了销售之后的结果
  • 基本户注销后还可以再开吗
  • 企业不得将生产经营项目、场所
  • 职工薪酬会计准则
  • 制造费用结转后有没有余额
  • 汇算清缴需要准备哪些数据
  • 未取得发票的收入怎么做账
  • 研发加计扣除税率
  • 未计提坏账准备金额在哪个科目
  • 库存商品低价销售违法吗
  • 来料加工复出口增值税政策
  • 无形资产增值税计入入账价值吗
  • 个人独资企业可以不开公户吗
  • 哪些房产免纳房产税
  • 华为股权激励制度
  • 差旅费应交税费会计科目
  • 股权转让需要什么资料
  • 委托代销商品委托方发出商品的分录
  • 企业支出的资产包括哪些
  • 哪些税费不适用征管法?
  • 开具的电子发票需要打印出来做账吗
  • 如何修改鼠标指示灯颜色
  • 长期待摊费用摊销明细表
  • 公司聚餐计入什么会计科目
  • 专业版 win10
  • php上传大文件失败
  • 华为mate x3最新价格
  • 长期借款科目的期末余额
  • wordpress测试
  • 合并报表期初数可以直接抄上年数吗
  • php文本操作
  • 企业现金流量表怎么分析
  • 企业重组的特殊性税务处理 税屋
  • 微信开发获取位置
  • 爱德华王子岛的气候
  • 程序员神器
  • php面试题目100及最佳答案
  • 报销差旅费属于什么现金流量项目
  • 自产自销农产品免税备案取消
  • 人力资源公司代办
  • 房地产企业卖房子增值税税率
  • 公司签发银行承兑汇票的行为属于什么
  • 其他货币资金是什么科目
  • sql server2005查询
  • 段云简介
  • 税是什么为什么要交税
  • 递延收益分摊是当月还是次月
  • 民办非企业单位工会经费
  • 银行只收不付解除方式
  • etc的充值发票可以报账吗
  • 长期股权投资的成本法和权益法区别
  • 收到其他企业投资是属于其他业务收入吗
  • 个人取得的劳务报酬需要交增值税吗
  • 银行存款付款是借方还是贷方
  • 员工工资占公司收入
  • sqlserver not in 语句使程充崩溃
  • win7系统双击不能打开我的电脑
  • 畅游盈利
  • 高效管理者的三大技能 罗伯特卡茨
  • .exe是什么软件
  • debian glibc
  • win8如何调屏幕亮度
  • android2d游戏开发
  • node返回html
  • node转go
  • android ashmem
  • angular创建service
  • javascript基础编程
  • javascript入门教学
  • 如何彻底删除android
  • HttpClient.execute() 阻塞问题
  • cocos2d安装
  • 郑州市华润燃气多少钱一立方
  • 河南林州在哪三省交界处
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设