el-upload上传进度

您可以使用el-upload组件的@progress事件来获取上传进度。在上传过程中，该事件将不断地触发，您可以通过event.loaded和event.total属性来计算当前的上传进度。以下是一个示例：

<template>
  <el-upload
    action="/your-upload-url"
    :on-progress="handleUploadProgress"
  >
    <el-button slot="trigger">点击上传</el-button>
  </el-upload>
</template>

<script>
export default {
  methods: {
    handleUploadProgress(event, file, fileList) {
      const percent = event.loaded / event.total * 100;
      console.log(`上传进度: ${percent}%`);
    }
  }
}
</script>

在上述示例中，el-upload组件绑定了handleUploadProgress方法作为@progress事件的处理函数。当上传进度发生变化时，handleUploadProgress方法会被调用，并且传入包含上传进度信息的event对象。您可以根据需要使用这些信息进行操作，比如更新页面上的进度条或显示上传进度等。

相关问题

el-upload 自定义上传进度

对于 `el-upload` 组件的自定义上传进度，你可以通过监听 `change` 事件来获取上传的文件对象，并使用自定义的方法来获取上传进度。

首先，在 `el-upload` 上添加 `@change` 事件的监听器，例如：

<el-upload
  class="upload-demo"
  action="/your-upload-url"
  :on-change="handleChange"
>
  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>

然后，在 Vue 实例中定义 `handleChange` 方法来处理文件的上传进度，例如：

export default {
  methods: {
    handleChange(file, fileList) {
      // 使用自定义的方法获取上传进度
      this.getUploadProgress(file);
    },
    getUploadProgress(file) {
      // 自定义获取上传进度的方法
      const xhr = new XMLHttpRequest();
      xhr.upload.addEventListener("progress", (event) => {
        if (event.lengthComputable) {
          const progress = Math.floor((event.loaded / event.total) * 100);
          console.log(`Upload progress: ${progress}%`);
          // 在这里更新上传进度的显示或执行其他操作
        }
      });
      xhr.upload.addEventListener("load", (event) => {
        console.log("Upload complete");
        // 在这里执行上传完成后的操作
      });
      // 发送请求
      xhr.open("POST", "/your-upload-url");
      xhr.setRequestHeader("Content-Type", "multipart/form-data");
      xhr.send(file);
    }
  }
}

上述代码中，`getUploadProgress` 方法使用 `XMLHttpRequest` 对象来发送文件上传请求，并通过监听 `progress` 事件获取上传进度，然后在事件处理函数中更新上传进度的显示或执行其他操作。

请根据你的实际需求修改代码，并将 `/your-upload-url` 替换为你的上传接口地址。

el-upload 显示上传文件进度

el-upload组件可以通过自定义上传的实现来显示上传文件的进度。你可以使用axios库来发送上传请求，并在请求中监听上传进度。以下是一个示例代码：

<template>
  <el-upload
    class="upload-demo"
    action="/upload"
    :on-progress="handleUploadProgress"
    :http-request="customUpload"
  >
    <el-button size="small" type="primary">点击上传</el-button>
  </el-upload>
</template>

<script>
import axios from 'axios';

export default {
  methods: {
    handleUploadProgress(event, file, fileList) {
      // 处理上传进度
      console.log('上传进度：', event.percent);
    },
    customUpload(file) {
      // 自定义上传实现
      return new Promise((resolve, reject) => {
        const formData = new FormData();
        formData.append('file', file);

        axios.post('/upload', formData, {
          headers: {
            'Content-Type': 'multipart/form-data'
          },
          onUploadProgress: (progressEvent) => {
            // 监听上传进度
            this.handleUploadProgress(progressEvent, file);
          }
        }).then(response => {
          // 上传成功
          resolve(response.data);
        }).catch(error => {
          // 上传失败
          reject(error);
        });
      });
    }
  }
}
</script>

在上述代码中，我们使用了el-upload组件，并通过设置`on-progress`属性来监听上传进度。在`customUpload`方法中，我们使用axios库发送上传请求，并在请求中设置`onUploadProgress`回调函数来监听上传进度。通过调用`handleUploadProgress`方法来处理上传进度。