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)!