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

1、自定义布局

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

element ui效果图： 目标效果：

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

//el-upload是用来控制图片上传，里面有相关属性。//img的是存放上传图片位置的地方

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

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

//把存放头像单独拿出来，放到一个div中，通过css布局来调整位置//点击上传的按钮一定要在el-upload内部才可以实现 点击上传 只能上传jpg/png文件，且不超过2MB

.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})}},//这里是文件转base64getBase64(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;},

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