手动上传【通过自定义点击事件上传】,el-upload 组件需要先绑定 ref

1. 取消默认 "自动上传功能" 。
   属性 auto-upload 设为 false
2. 自定义点击事件 <el-button @click="uploadBtn">上传</el-button>
3. 触发上传方法 this.$refs.???.submit();

<el-upload
  ref="uploadRef"
  class="upload-demo"
  action="https://jsonplaceholder.typicode.com/posts/"
  :auto-upload="false"
  >
  <el-button size="small" type="primary" @click="uploadBtn">点击上传</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>

methods:{
  uploadBtn(){
    this.$refs.uploadRef.submit()
  }
}

自定义上传方法
属性 http-request

<el-upload
  ref="uploadRef"
  class="upload-demo"
  action="https://jsonplaceholder.typicode.com/posts/"
  :http-request="httpRequest"
  >
  <el-button size="small" type="primary" @click="uploadBtn">点击上传</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>

import axios from 'axios'
methods:{
  httpRequest(){
    axios({
      url:'https://jsonplaceholder.typicode.com/posts/',
      method:'post'
    }).then(res => {
      console.log("数据处理")
    })
  }
}

注意：使用自定义上传方式http-request，与 auto-upload:false 一起使用时，选择文件后http-request方法不会触发。这时就需要配合手动上传。或者使用自动上传，在httpRequest 方法里做判断也可以。