組件再好看，功能在美好，也要按照需求來(lái)，哎打工人就是這樣咯！
今天介紹一下element-ui的上傳頭像組件 el-upload，官方示例如下：
image.png
非常簡(jiǎn)潔方便，里面使用到的屬性主要有
action、before-upload實(shí)現(xiàn)很簡(jiǎn)單，就是點(diǎn)擊
+ 號(hào)然后選擇圖片，確認(rèn)之后，直接調(diào)用action的地址上傳到服務(wù)器。before-upload可以在上傳到服務(wù)器之前對(duì)圖片進(jìn)行格式限制。官方就是這么用的。
需求：
但是本次我是想實(shí)現(xiàn)，加多一個(gè)按鈕上傳，我點(diǎn)擊+號(hào)之后圖片只是顯示在圖片框中，等我點(diǎn)擊上傳按鈕的時(shí)候，再執(zhí)行axios，這樣也方便能被我的攔截器攔截到，進(jìn)行一些header頭的處理。
沒(méi)辦法只能自己重新處理一下。還好element官方提供了許多el-upload組件聲明周期的屬性，通過(guò)屬性綁定對(duì)應(yīng)的方法，基本足夠自定義上傳邏輯了。
下面是代碼：
我是直接將封裝成一個(gè)組件了，也方便以后其他地方可以用到，直接cv，你懂的！
效果：
image.png
components/uploadAvatar/index.vue
1、先放結(jié)構(gòu)
<template>
<div class="">
<div class="upload-dialog-content">
<div class="upload-picture-area">
<el-upload
ref="upload"
action=""
class="avatar-uploader"
:http-request="handleUploadAvatar"
:show-file-list="false"
:before-upload="beforeAvatarUpload"
:auto-upload="false"
:on-change="displayAvatar">
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</div>
<div class="upload-button-area">
<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上傳到服務(wù)器</el-button>
</div>
</div>
</div>
</template>
2、script
<script>
export default {
//import引入的組件需要注入到對(duì)象中才能使用
name:'UploadAvatar',
props: [], // 父組件向該組件傳遞過(guò)來(lái)的參數(shù)，用props接收
data() {
//這里存放數(shù)據(jù)
return {
imageUrl:'',
};
},
//監(jiān)聽(tīng)屬性 類(lèi)似于data概念
computed: {},
//監(jiān)控data中的數(shù)據(jù)變化
watch: {},
//方法集合
methods: {
//在上傳到服務(wù)器之前執(zhí)行
beforeAvatarUpload(file) {
const isJPG = file.type === 'image/jpeg';
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG) {
this.$message.error('上傳頭像圖片只能是 JPG 格式!');
}
if (!isLt2M) {
this.$message.error('上傳頭像圖片大小不能超過(guò) 2MB!');
}
return isJPG && isLt2M;
},
// on-change屬性方法，用于將圖片從本地傳到前端，獲取到圖片，回顯到顯示框中
displayAvatar(file){
this.imageUrl = URL.createObjectURL(file.raw);
},
// http-request覆蓋默認(rèn)的上傳行為，可以自定義上傳的實(shí)現(xiàn)
// 在調(diào)用submit的方法時(shí)，因?yàn)榉椒ㄒ呀?jīng)被重寫(xiě)，會(huì)自動(dòng)觸發(fā)http-request所綁定的方法，從而獲取到file對(duì)象
handleUploadAvatar(file){
// 當(dāng)調(diào)用this.$refs.upload.submit();的時(shí)候會(huì)走到http-request屬性綁定的方法，就是該方法，這時(shí)候需要出發(fā)父組件監(jiān)聽(tīng)的uploadAvatarSubmit方法。將圖片對(duì)象傳出去，這步很重要。
bus.$emit('uploadAvatarSubmit', file);
},
//點(diǎn)擊上傳到服務(wù)器按鈕
submitUpload(){
this.$refs.upload.submit();
}
},
};
</script>
3、style
<style lang='scss' scoped>
.upload-dialog-content{
display: flex;
justify-content: space-between;
flex-direction: column;
align-items: center;
.upload-picture-area{
flex: 3;
margin-bottom: 10px;
}
.upload-button-area{
flex: 1;
}
}
</style>
<style>
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}
</style>
官方是通過(guò)submit方法 走action地址直接請(qǐng)求上傳圖片，我這里使用了http-request 覆蓋了默認(rèn)的行為，也就是說(shuō)，當(dāng)你調(diào)用this->$refs->upload->submi()的時(shí)候，就會(huì)走http-request屬性綁定的方法，這時(shí)候只需要在該方法里面寫(xiě)你的邏輯就好。
父組件使用：
1、結(jié)構(gòu)
<template>
<div>
......
<!-- 上傳頭像 -->
<el-dialog title="上傳頭像" :visible.sync="uploadFormVisible" width="20%" center>
<upload-avatar />
</el-dialog>
</div>
......
</template>
2、script
<script>
//1引入子組件
import uploadAvatar from '@/components/uploadAvatar'
export default {
components:{ uploadAvatar },//2掛載
data() {
return {
size:60,
uploadFormVisible:false,
fit:'fill',
}
}，
mounted(){
// 這里需要注冊(cè)監(jiān)聽(tīng) uploadAvatarSubmit方法，子組件已經(jīng)使用$emit來(lái)觸發(fā)了
bus.$on('uploadAvatarSubmit', data=>{
this.uploadAvatarSubmit(data);
})
},
methods: {
//上傳頭像打開(kāi)
uploadAvatar(){
this.uploadFormVisible = true
},
//將圖片上傳到后端
uploadAvatarSubmit(file){
//從組件傳遞過(guò)來(lái)的file對(duì)象已經(jīng)獲取到，只需要按照自己希望的格式傳給后端就行。此處執(zhí)行自己的處理邏輯
const fileObj = file.file
const form = new FormData()
form.append('imageFile',fileObj)
//這里我需要使用formData格式，你們隨意
_uploadAdminUserAvatar(form).then( res => {
if (res.code == 0) {
this.uploadFormVisible = false
this.$message.success(res.msg)
//因?yàn)槲翼?xiàng)目里用了vuex 所以我在這里上傳完頭像之后 重新去后端獲取頭像的url，就會(huì)自動(dòng)刷新我的頭像為新上傳的圖片了
this.$store.dispatch('user/getInfo')
} else {
this.$message.error(res.msg)
}
})
},
}
}
</script>
