el-upload onProgress

el-upload 组件是 ElementUI 中的一个文件上传组件，它提供了 on-progress 属性用于监听上传进度。当文件上传过程中，每上传一部分数据，就会触发一次 on-progress 事件，并返回一个 progress 事件对象，其中包含了上传进度的相关信息，比如已上传的字节数、总字节数、上传速度等。你可以在该事件回调函数中处理上传进度的展示逻辑，比如更新进度条的进度。

相关问题

el-upload 进度条

要在el-upload组件中添加进度条，你可以使用`show-upload-list`属性来显示上传列表，并利用插槽来自定义列表的内容。以下是一个示例代码：

<template>
  <el-upload
    ref="upload"
    class="upload-demo"
    action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
    :limit="1"
    :on-exceed="handleExceed"
    :auto-upload="false"
    :show-upload-list="true"
    :on-progress="handleProgress"
    :on-preview="handlePreview"
  >
    <template #trigger>
      <el-button type="primary">select file</el-button>
    </template>
    <el-button class="ml-3" type="success" @click="submitUpload">
      upload to server
    </el-button>
    <template #tip>
      <div class="el-upload__tip text-red">
        limit 1 file, new file will cover the old file
      </div>
    </template>
    <template #default="{ file }">
      <div class="el-upload-list__item is-uploading">
        <div class="el-upload-list__item-thumbnail">
          <img :src="file.url" alt="">
        </div>
        <div class="el-upload-list__item-content">
          <span class="el-upload-list__item-name">{{ file.name }}</span>
          <el-progress class="el-upload-list__item-progress" :percentage="file.percentage" />
        </div>
      </div>
    </template>
  </el-upload>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { genFileId } from 'element-plus';
import type { UploadInstance, UploadProps, UploadRawFile } from 'element-plus';

const upload = ref<UploadInstance>();

const handleExceed: UploadProps['onExceed'] = (files) => {
  upload.value!.clearFiles();
  const file = files[0] as UploadRawFile;
  file.uid = genFileId();
  upload.value!.handleStart(file);
};

const handleProgress: UploadProps['onProgress'] = (event, file, fileList) => {
  file.percentage = (event.loaded / event.total) * 100;
};

const submitUpload = () => {
  upload.value!.submit();
};

export default {
  setup() {
    return { upload, handleExceed, handleProgress, submitUpload };
  },
};
</script>

在上述代码中，我们使用了`show-upload-list`属性来显示上传列表，并使用默认插槽来定义列表的内容。在列表项中，我们添加了一个进度条组件`<el-progress>`来展示文件上传的进度。`on-progress`事件监听文件的上传进度，将进度值赋给文件对象的`percentage`属性，在模板中使用该属性来显示进度条。

请注意，这里使用的是Vue 3的`<script setup>`语法，你可以根据自己的项目配置进行调整。

el-upload 多文件上传进度条

el-upload 是 Element UI 提供的文件上传组件，支持多文件上传。如果需要为 el-upload 组件添加多文件上传进度条，可以使用 el-progress 组件结合 el-upload 的 events 属性实现。

首先，在 el-upload 组件中添加 `show-file-list="false"` 属性，隐藏上传文件列表。然后，在 el-upload 组件中添加一个 el-progress 组件，将 el-progress 组件的 `percentage` 属性绑定到一个变量（如 `uploadPercent`），并设置 el-progress 组件的 `stroke-width` 属性和 `status` 属性。最后，在 el-upload 组件的 `before-upload` 和 `on-progress` 事件中更新 `uploadPercent` 变量的值。

以下是示例代码：

<el-upload
  class="upload-demo"
  action="/upload"
  :on-success="handleSuccess"
  :on-error="handleError"
  :before-upload="beforeUpload"
  :on-progress="onProgress"
  :show-file-list="false">
  <el-button size="small" type="primary">点击上传</el-button>
  <el-progress :percentage="uploadPercent" :stroke-width="8" status="success"></el-progress>
</el-upload>

data() {
  return {
    uploadPercent: 0
  }
},
methods: {
  beforeUpload(file) {
    // 在上传前重置上传进度条
    this.uploadPercent = 0
  },
  onProgress(event, file, fileList) {
    // 更新上传进度条的值
    this.uploadPercent = event.percent
  },
  handleSuccess(response, file, fileList) {
    // 上传成功后重置上传进度条
    this.uploadPercent = 0
  },
  handleError(error, file, fileList) {
    // 上传失败后重置上传进度条
    this.uploadPercent = 0
  }
}