el-upload通过http-request实现图片上传覆盖

通过使用el-upload的http-request方法，我们可以实现自定义的图片上传。为了覆盖默认的上传行为，我们可以使用以下步骤：

1. 首先，在el-upload组件中设置http-request属性，并将其值设置为一个自定义的函数，该函数将负责处理上传请求。

2. 在自定义的函数内部，我们可以使用axios或其他HTTP库发送POST请求来上传图片。在请求中，我们需要将图片文件作为FormData的一部分发送。

3. 在发送请求之前，我们可以在函数内部实现自定义的进度条组件，以显示上传的进度。可以使用el-progress组件来实现。

4. 当请求成功时，我们可以在回调函数内部进行一些额外的操作，例如保存上传成功后的图片地址或更新UI。

下面是一个示例代码，展示了如何通过http-request方法实现图片上传覆盖：

<template>
  <el-upload
    class="upload-demo"
    :action="''"
    :http-request="customUpload"
    multiple
  >
    <i class="el-icon-upload"></i>
    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
    <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
  </el-upload>
</template>

<script>
export default {
  methods: {
    customUpload(file) {
      return new Promise((resolve, reject) => {
        // 创建FormData对象
        const formData = new FormData()
        formData.append('file', file)

        // 创建自定义的进度条组件
        const progress = this.$createElement('el-progress', {
          props: {
            type: 'line',
            strokeWidth: 2,
            textInside: true
          }
        })
        const progressContainer = this.$createElement('div', {
          class: 'progress-container'
        }, [progress])

        // 将自定义进度条插入到上传组件中
        const elUpload = this.$refs.upload.$el
        elUpload.appendChild(progressContainer)

        // 发送上传请求
        axios.post('/upload', formData, {
          headers: {
            'Content-Type': 'multipart/form-data'
          },
          onUploadProgress: (event) => {
            // 更新进度条
            progress.props.percentage = Math.round((event.loaded / event.total) * 100)
          }
        }).then(response => {
          // 上传成功后的操作
          const imageUrl = response.data.imageUrl
          // 在这里可以保存图片地址或更新UI
          resolve()
        }).catch(error => {
          // 上传失败的操作
          reject(error)
        })
      })
    }
  }
}
</script>

在上述示例代码中，我们通过http-request方法实现了自定义的图片上传。自定义函数customUpload接收一个参数file，代表要上传的文件。在函数内部，我们创建了一个FormData对象，并将文件添加到其中。然后，我们使用axios发送POST请求，将FormData对象作为请求的数据发送。在请求过程中，我们通过onUploadProgress事件监听上传进度，并更新自定义的进度条组件。当请求成功时，我们可以在回调函数内部进行一些额外的操作，例如保存上传成功后的图片地址或更新UI。