組件再好看，功能在美好，也要按照需求來，哎打工人就是這樣咯！
今天介紹一下element-ui的上傳頭像組件 el-upload，官方示例如下：
image.png
非常簡潔方便，里面使用到的屬性主要有
action、before-upload實現很簡單，就是點擊
+ 號然后選擇圖片，確認之后，直接調用action的地址上傳到服務器。before-upload可以在上傳到服務器之前對圖片進行格式限制。官方就是這么用的。
需求：
但是本次我是想實現，加多一個按鈕上傳，我點擊+號之后圖片只是顯示在圖片框中，等我點擊上傳按鈕的時候，再執行axios，這樣也方便能被我的攔截器攔截到，進行一些header頭的處理。
沒辦法只能自己重新處理一下。還好element官方提供了許多el-upload組件聲明周期的屬性，通過屬性綁定對應的方法，基本足夠自定義上傳邏輯了。
下面是代碼：
我是直接將封裝成一個組件了，也方便以后其他地方可以用到，直接cv，你懂的！
效果：
image.png
components/uploadAvatar/index.vue
1、先放結構
<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">上傳到服務器</el-button>
</div>
</div>
</div>
</template>
2、script
<script>
export default {
//import引入的組件需要注入到對象中才能使用
name:'UploadAvatar',
props: [], // 父組件向該組件傳遞過來的參數，用props接收
data() {
//這里存放數據
return {
imageUrl:'',
};
},
//監聽屬性 類似于data概念
computed: {},
//監控data中的數據變化
watch: {},
//方法集合
methods: {
//在上傳到服務器之前執行
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('上傳頭像圖片大小不能超過 2MB!');
}
return isJPG && isLt2M;
},
// on-change屬性方法，用于將圖片從本地傳到前端，獲取到圖片，回顯到顯示框中
displayAvatar(file){
this.imageUrl = URL.createObjectURL(file.raw);
},
// http-request覆蓋默認的上傳行為，可以自定義上傳的實現
// 在調用submit的方法時，因為方法已經被重寫，會自動觸發http-request所綁定的方法，從而獲取到file對象
handleUploadAvatar(file){
// 當調用this.$refs.upload.submit();的時候會走到http-request屬性綁定的方法，就是該方法，這時候需要出發父組件監聽的uploadAvatarSubmit方法。將圖片對象傳出去，這步很重要。
bus.$emit('uploadAvatarSubmit', file);
},
//點擊上傳到服務器按鈕
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>
官方是通過submit方法 走action地址直接請求上傳圖片，我這里使用了http-request 覆蓋了默認的行為，也就是說，當你調用this->$refs->upload->submi()的時候，就會走http-request屬性綁定的方法，這時候只需要在該方法里面寫你的邏輯就好。
父組件使用：
1、結構
<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(){
// 這里需要注冊監聽 uploadAvatarSubmit方法，子組件已經使用$emit來觸發了
bus.$on('uploadAvatarSubmit', data=>{
this.uploadAvatarSubmit(data);
})
},
methods: {
//上傳頭像打開
uploadAvatar(){
this.uploadFormVisible = true
},
//將圖片上傳到后端
uploadAvatarSubmit(file){
//從組件傳遞過來的file對象已經獲取到，只需要按照自己希望的格式傳給后端就行。此處執行自己的處理邏輯
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)
//因為我項目里用了vuex 所以我在這里上傳完頭像之后 重新去后端獲取頭像的url，就會自動刷新我的頭像為新上傳的圖片了
this.$store.dispatch('user/getInfo')
} else {
this.$message.error(res.msg)
}
})
},
}
}
</script>
