vue3 -element-plus 表格上传

<!--    action="http://10.27.126.155:2616/uploadSystemControl" -->
<template>
    <el-upload
    class="upload-demo"
    action="https://jsonplaceholder.typicode.com/posts/"
    :on-change="handleChange"
    :on-success="handleSuccess"
    :before-upload="beforeUpload"
    :on-progress="uploadProcess"
    :file-list="fileList"
    >
    <el-button size="small" type="primary">点击上传</el-button>
  </el-upload>
// 100% 加载效果
  <el-progress type="circle" :percentage="percent" style="margin-top: 20px"></el-progress>

  </template>
  <script>
  import { defineComponent,reactive,ref } from 'vue'
  export default defineComponent({
    components:{

    },
      setup() {
      
        const fileList=reactive([]);

        const percent=ref(0);

        // 上传前校验
      const beforeUpload=(file)=> {
        console.log('上传前端校验',file.size);
         const isLt10M = file.size / 1024 / 1024  < 10;
         if (!isLt10M) {
          this.$message.error('上传图片不能超过10MB哦!');
          return false;
        }
        
      }

      //上传成功回调
      const handleSuccess=(res, file)=>{
        console.log('handleSuccessres',res)
        console.log('handleSuccessfile',file)
        if (res) {
            setTimeout(() => {
                alert('上传成功')
            }, 1500);
          
        } else {
          alert('视频上传失败，请重新上传！');
        }
      }
  
      //上传文件
       const  handleChange=(file, fileList)=>{
           console.log('file---',file)
           console.log('fileList---',fileList)
            fileList = fileList.slice(-3);
        }


        // 上传时候的钩子
      const uploadProcess=(event, file, fileList)=> {
            console.log(event.percent);
            percent.value = Math.floor(event.percent);
      }

  // 定义变量和方法必须返回
      return {
        fileList,
        beforeUpload,
        handleChange,
        handleSuccess,
        uploadProcess,
        percent
      }

      },
  })
  </script>
  <style scoped>
  .text-left{text-align: left;padding-left:30px;}
  h3{padding-bottom:20px;}
  .cust_btn30{padding-bottom:60px;padding-top:30px;}
  .text_fise{font-size:16px;}
  .text_fise>div{padding-bottom:20px;}
  </style>

image.png image.png