el-upload中使用http-request自定义上传文件时，怎么获取上传进度

在`el-upload`组件中，如果你选择通过`http-request`自定义上传文件，通常会涉及到一个后台API来处理文件上传。要获取上传进度，你需要在发送请求时监听返回的状态码、响应体中的进度信息或者是设置一个上传进度事件。

以下是一个基本的步骤：

1. 在发送HTTP请求前，初始化一个变量存储上传进度，例如`uploadProgress = 0`。

2. 当发送异步上传请求时，添加一个`on-progress`回调函数，这个函数会在每次文件上传过程中接收一个`progress`参数，它是当前的上传百分比。例如在axios或fetch中可以这样做：

const sendUploadRequest = async (file) => {
  const uploadProgress = 0; // 初始化上传进度

  try {
    const response = await axios.post('/api/upload', { file }, {
      onUploadProgress: (progressEvent) => {
        uploadProgress = Math.round(progressEvent.loaded * 100 / progressEvent.total);
      }
    });

    // 在这里处理服务器的响应
    console.log(response);

    // 更新上传进度到前端 UI
    this.uploadProgress = uploadProgress;
  } catch (error) {
    console.error('Error uploading:', error);
  }
};

3. 在`el-upload`的配置中，你可以使用`on-change`事件来触发上传，并传入`sendUploadRequest`函数：

<template>
  <el-upload
    :action="uploadUrl"
    :on-change="sendUploadRequest"
    ...其他属性...
  ></el-upload>
</template>

<script>
export default {
  data() {
    return {
      uploadProgress: 0,
      uploadUrl: 'your-api-url',
    };
  },
  methods: {
    sendUploadRequest(file) {
      this.sendUploadRequest(file);
    }
  }
};
</script>

这样，在用户上传文件的过程中，你就可以在`this.uploadProgress`上看到实时的上传进度了。