Vue3 ElementPlus上传组件的进度条显示

# 1. 简介

## 1.1 Vue3和ElementPlus概述
在现代Web开发中，Vue.js作为一款流行的前端框架，具有灵活性和高效性，而ElementPlus是一套基于Vue3的桌面端UI库，提供丰富的组件和工具，方便开发人员快速构建界面。

## 1.2 上传组件的重要性
上传组件在Web应用中起着至关重要的作用，用户可以通过它们轻松地上传文件、图片或其他类型的数据，提高用户体验和系统功能性。

## 1.3 本文内容概述
本文将深入探讨基于Vue3和ElementPlus的上传组件功能，重点介绍如何实现进度条显示等技术挑战，帮助读者更好地理解和应用这一功能。

# 2. 准备工作

在本章节中，我们将主要讨论如何进行准备工作，包括Vue3和ElementPlus的环境配置，导入ElementPlus上传组件以及创建一个基本的上传组件模板。让我们一步步来进行操作。

# 3. 实现文件上传功能

在这一章节中，我们将详细介绍如何使用Vue3和ElementPlus来实现文件上传功能，并展示如何监控上传进度，并实时更新进度条显示。

#### 3.1 使用ElementPlus上传组件实现文件选择和上传

// 在template中引入el-upload组件
<el-upload
  class="upload-demo"
  action="https://www.example.com/upload"
  :show-file-list="false"
  :on-success="handleSuccess"
>
  <el-button size="small" type="primary">点击上传</el-button>
</el-upload>

#### 3.2 监听文件上传进度事件

// 监听上传进度事件
<el-upload
  class="upload-demo"
  action="https://www.example.com/upload"
  :show-file-list="false"
  :on-progress="handleProgress"
>
  <el-button size="small" type="primary">点击上传</el-button>
</el-upload>

// 在methods中定义handleProgress方法
methods: {
  handleProgress(event, file, fileList) {
    // 通过event.percent可获取上传进度百分比
    console.log(event.percent);
  }
}

#### 3.3 实时更新进度条显示

<template>
  <el-progress :percentage="uploadPercen