1、自定義布局
? ? ? 查閱element ui的頭像上傳功能，發(fā)現(xiàn)是點擊頭像位置才可以上傳，那我們可不可以點擊頭像外部的按鈕來上傳頭像呢？
element ui效果圖：? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?目標(biāo)效果：
?????????????????????????
?在實現(xiàn)之前要明白element ui里面代碼的含義：
//el-upload是用來控制圖片上傳，里面有相關(guān)屬性。
<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>?當(dāng)我們明白每個標(biāo)簽的含義之后，我們就可以通過調(diào)整img標(biāo)簽的位置來達到自己的目標(biāo)效果。
下圖為目標(biāo)效果圖的代碼：html+css布局
<div class="touxiang">
//把存放頭像單獨拿出來，放到一個div中，通過css布局來調(diào)整位置
<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內(nèi)部才可以實現(xiàn)
<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、文件轉(zhuǎn)base64（html代碼見上圖）
2.1先定義好需要用到的變量
data() {
return {
// 上傳頭像地址
imageUrl: '',
//接收上傳的文件
fileList:[],
};
},2.2通過on-change來監(jiān)控傳入文件的狀態(tài)，當(dāng)上傳的文件大小（beforeAvatarUpload函數(shù)）以及格式（html代碼里面的accept屬性）達到了我們的目標(biāo)要求后就可以將文件進行轉(zhuǎn)換，之后在傳給后端。文章來源：http://www.zghlxwxcb.cn/news/detail-802554.html
// 頭像上傳
getFile(file, fileList) {
if(this.beforeAvatarUpload(file)){
this.getBase64(file.raw).then(res => {
this.imageUrl = res;
//ruleForm是我接收后端傳過來的數(shù)據(jù)，此處可以忽略
this.ruleForm.imagePath=res
})
}
},
//這里是文件轉(zhuǎn)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;
},到這里文章就結(jié)束啦，希望可以對您有所幫助！文章來源地址http://www.zghlxwxcb.cn/news/detail-802554.html
到了這里，關(guān)于vue+element ui完成頭像上傳功能（文件轉(zhuǎn)base64）以及自定義布局。的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
