element-ui 上传组件 自定义上传进度条加提示正在上传

Element UI 的 Upload 组件提供了一种方便的方式来实现文件上传功能。如果你想自定义上传进度条和添加“正在上传”的提示，你可以通过覆盖默认样式并监听上传事件来实现。这里是一个简单的步骤说明：

1. 首先，在 Vue 文件中导入 Upload 组件和 Element UI 主题样式，如果还没引入，可以这样做：

   <template>
     <el-upload
       :action="uploadUrl"
       :before-upload="beforeUpload"
       :on-progress="handleProgress"
       :on-error="handleError"
       :show-file-list="false"
       :auto-upload="true">
       <i class="el-icon-upload"></i>
       <div slot="tip">点击上传</div>
     </el-upload>
   </template>

2. 然后，在组件的 methods 中，编写处理上传状态的方法：

   import { Loading } from 'element-plus';

   data() {
     return {
       loading: new Loading({ fullscreen: true }), // 创建一个全屏加载动画
     };
   },
   
   methods: {
     beforeUpload(file) {
       this.loading.show(); // 显示加载动画
       // 这里可以添加你的验证逻辑，如文件大小、格式等
       return true;
     },
     
     handleProgress(progress) {
       // 更新进度条，比如百分比
       let percent = Math.round((progress.loaded / progress.total) * 100);
       this.$refs.myLoading.setProgress(percent); // 如果你的进度条有自己的引用
       if (percent === 100) {
         this.$message.success('上传完成');
         this.loading.hide(); // 隐藏加载动画
       }
     },
     
     handleError(err) {
       console.error('上传错误', err);
       this.loading.hide();
     },
   },

注意 `myLoading` 是你自定义进度条组件的引用，如果没有，你需要创建一个，并在模板上绑定到 `ref` 属性。