el-upload的on-progress

el-upload 组件的 on-progress 事件用于在文件上传过程中获取上传进度的回调函数。当文件上传过程中发生进度变化时，该事件会被触发。

你可以通过在 el-upload 组件上绑定 on-progress 属性，并将其设置为一个函数来处理进度变化的逻辑。例如：

<template>
  <el-upload
    action="/upload"
    :on-progress="handleProgress"
  >
    <el-button type="primary">点击上传</el-button>
  </el-upload>
</template>

<script>
export default {
  methods: {
    handleProgress(event, file, fileList) {
      console.log('上传进度：', event.percent);
    }
  }
}
</script>

在上述代码中，我们在 el-upload 组件上绑定了 on-progress 属性，并将其设置为 handleProgress 方法。每次上传进度发生变化时，handleProgress 方法会被调用，event.percent 参数表示当前上传进度的百分比。你可以在该方法中添加自己的逻辑，比如更新进度条的显示等操作。

注意：el-upload 组件需要配合后端服务器进行文件上传，所以你需要根据实际情况将 action 属性设置为对应的后端接口地址。

相关问题

el-upload on-progress

### Element UI `el-upload` 组件中的 `on-progress` 事件用法

Element UI 的 `el-upload` 组件提供了多种事件来处理文件上传的不同阶段，其中包括 `on-progress` 事件。此事件会在文件上传过程中触发，允许开发者监控上传进度。

#### 基本属性配置

为了监听上传过程中的进度变化，在使用 `el-upload` 组件时可以绑定 `on-progress` 属性到自定义的方法上：

<template>
  <div id="app">
    <el-upload
      action="https://jsonplaceholder.typicode.com/posts/"
      :on-progress="handleProgress"
    >
      <button>点击上传</button>
    </el-upload>
    <p v-if="uploading">正在上传... {{ progress }}%</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      uploading: false,
      progress: 0
    };
  },
  methods: {
    handleProgress(event, file, fileList) {
      this.uploading = true;
      this.progress = Math.round((event.loaded * 100) / event.total);
      
      console.log('当前进度:', this.progress); // 输出当前百分比
      
      if (this.progress >= 100) {
        setTimeout(() => { // 模拟完成后的延迟关闭状态
          this.uploading = false;
        }, 2000);
      }
    }
  }
};
</script>

上述代码展示了如何设置 `el-upload` 并利用 `on-progress` 来更新页面上的显示信息[^3]。

el-upload on-progress不触发

el-upload 组件的 on-progress 事件需要在上传文件时设置 prop 属性 show-progress 为 true 才会触发。如果设置了该属性但仍然无法触发 on-progress 事件，可能是上传的文件过小或者网络传输速度过快导致进度条瞬间完成。可以尝试上传一个较大的文件或者在网络较慢的情况下测试。