组件再好看，功能在美好，也要按照需求来，哎打工人就是这样咯！
今天介绍一下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>
