解决el-upload组件中on-progress钩子函数无法触发，进度条无效的问题

解决el-upload组件中on-progress钩子函数无法触发，进度条无效的问题

上传文件的时候需要用到进度条，但是on-progress钩子函数无法触发
搜了好多资料都是说是跟模拟数据mock有关，注释掉即可，但是。。。项目里一搜一大堆mock,还要保证后端接口数据调取成功，这。。。。怕不是要一行一行代码的瞅了？

on-progress用不了，用on-change代替（上传过程中都会调用这个方法，file.status有ready,sucess等状态来判断文件是否上传成功），但是我是视频上传到oss上面，只拿到了file.ready,拿不到file.sucess,所以就模拟给了个进度条，虽然不是真实的监控上传进度，但对于用户相对比较友好一点。

代码：

 <el-upload
          ref="videoUpload"
          :http-request="fnUploadRequest"
          :disabled="disableBtn"
          :auto-upload="false"
          :on-remove="videoRemove"
          :file-list="fileListVideo"
          :on-change="videoChange"
          name="video"
          accept=".mp4, .webm, .OGG"
          list-type="picture"
        >
</el-upload>
<el-progress v-show="showProcess" :percentage="processLen" :color="customColor" />

async videoChange(file, fileList) {
    
    
      console.log(file)
      //刚开始上传的时候，可以拿到ready状态，给个定时器，让进度条显示
      if (file.status === 'ready') {
    
    
        this.showProcess = true //进度条显示
        const interval = setInterval(() => {
    
    
          if (this.processLen >= 100) {
    
    
            clearInterval(interval)
            return
          }
          this.processLen += 1 //进度条进度
        }, 80)
      }
      const res = await getVideoSTS() // 这个是调的后端接口拿accessKeyId、accessKeySecret、stsToken
      console.log(res, '获取配置项')
      if (res.status === 200) {
    
    
        const data = res.data.data
        const client = new OSS({
    
    
          region: 'bucket 所在的区域',
          accessKeyId: data.accessKeyId, // 换成自己的
          accessKeySecret: data.accessKeySecret, //换成自己的
          stsToken: data.securityToken,
          bucket: '这是你们的bucket名字'
        })
        const index = file.name.lastIndexOf('.')
        const suffix = file.name.substring(index, file.name.length)
        const fileName = 'haiba-video/file_' + file.uid + suffix
        client.multipartUpload(fileName, file.raw, {
    
    }).then(result => {
    
    
          console.log(result)
          const videoUrl = '自己的域名' + result.name 
           this.processLen = 100//上传成功后直接给了100
        }).catch((err) => {
    
    
          console.log(err)
        })
      }
    },

多说一下，若是上传视频不是前端直接传到OSS上的，可以拿到file.success，可以在这里判断上传成功。

if (file.status === 'success') {
    
    
      this.showProcess = false  
      this.processLen = 100  
}

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