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

1
  
  
  
  
  
  
  
 、自定义布局

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

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; },

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