element-ui el-upload组件实现点击按钮后传到后台

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

2、script

3、style

官方是通过submit方法 走action地址直接请求上传图片，我这里使用了http-request 覆盖了默认的行为，也就是说，当你调用this->$refs->upload->submi()的时候，就会走http-request属性绑定的方法，这时候只需要在该方法里面写你的逻辑就好。

父组件使用：
1、结构

2、script