ElementPlus upload on-progress踩坑记录

解决upload上传文件进度条on-progress钩子函数无法触发，进度条无效的问题

上传大文件的时候要显示上传的进度条,需要用到upload on-progress

钩子函数,但使用了会发现on-progress 有时不触发. 上网百度了一大堆,概而论之大概意思就是由于 项目中引入了mock 数据覆盖了原有的xhr请求,但是。。。项目里一搜一大堆mock,还要保证后端接口数据调取成功，这。。。。怕不是要一行一行代码的瞅了？

on-progress用不了，用on-change代替（上传过程中都会调用这个方法，file.status有ready,success等状态来判断文件是否上传成功）虽然拿不到success 但对用户比较友好一点

 <el-upload
      class="upload-demo"
      :limit="1"
      action="#"
      ref="upload"
      :before-upload="beforeUpload"
      :http-request="httpRequest"
      :show-file-list="false"
      :on-exceed="handleExceed"
      :on-success="handleAvatarSuccess"
      :on-error="handleAvatarErrors"
      :on-change="uploadVideoProcess"
    >
      <el-button type="success">选择文件</el-button>
      <template #tip>
        <div class="el-upload__tip"> 可上传图片，建议分辨率1920*1080像素 </div>
      </template>
    </el-upload>
    <!-- 进度条 -->
    <el-progress v-if="progressFlag" :percentage="percentage" />

const uploadVideoProcess = async (event: any) => {
  if (event.status === 'ready') {
    progressFlag.value = true // 显示进度条
    const interval = setInterval(() => {
      if (percentage.value >= 100) {
        clearInterval(interval)
        return
      }
      percentage.value += 1 //进度条进度
    }, 80)
  }
}

 思路来自于：https://www.cnblogs.com/best-fyx/p/11363506.html，