位置: 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; },