栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 前沿技术 > 大数据 > 大数据系统

vue cli 项目Element-ui upload 把上传头像 转为base64 保存数据库(头像预览待更新)

vue cli 项目Element-ui upload 把上传头像 转为base64 保存数据库(头像预览待更新)

 

 

 

使用组件,

:size="46" 这是大小

:limit="1" 最多上传文件数

list-type="picture" 上传文件类型

action=""   上传地址

auto-upload 是否自动上传 (填写false后.上传之后自动弹出一个小框)

accept="image/jpeg" 上传文件的类型,上传界面仅显示该类文件

on-change 事件获取文件信息


on-change事件 getFile()函数 -> 检查文件大小及格式 -> 检验通过后将图片转成base64 getbase64()函数 -> 上传更新用户信息到数据库 setUser()函数 -> 图片回显


.PersonalData{
    .divs{
        display: flex;
        justify-content: left;
        height: 60px;
        border-bottom:1px solid #f0f0f5 ;
        .title{
            line-height: 70px;
            width: 100px;
            text-align: left;
        }
        .avatar-uploader{
            width: 50px;
            height: 50px;
        }
        span{
            line-height: 70px;
        }
        .avatar{
            width: 50px;
            height: 50px;
            border-radius: 50%;
        }
    }
}


转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/278465.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号