vue-element-admin 上传进度条

前言

今天分享一个在 vue-element-admin 中使用的上传组件，使用 elementUI 仪表盘形进度条，可以上传图片、视频。图片、视频尺寸根据传入的参数改变。

效果

报错 Invalid prop: custom validator check failed for prop "percentage".

出现这个错误的原因，并不是因为 dom 已经渲染完成了，而数据还没回来。而是因为 percentage 超出正常取值（0~100）范围。

因为人为的控制进度，所以 percentage 会出现负数现象。

控制进度是因为，后端处理上传数据需要时间，前端已经传完了，但是资源地址返回会慢一些。如果进度条过早走到 100% 而资源地址还没拿到显示不出来，会让用户迷惑。

// 上传进度调用方法实现
xhr.upload.onprogress = function(evt) {
  // evt.total是需要传输的总字节，evt.loaded是已经传输的字节。如果evt.lengthComputable不为真，则evt.total等于0
    if (evt.lengthComputable) {
      // 进度条限制 上传时永远不能达到100% 最大95% 除非收到后端返回值 才设置为100%
      $v.percentage = Math.floor(evt.loaded / evt.total * 100) - 5
      console.log($v.percentage)
    }
}

找到问题后就很好解决了

$v.percentage < 0 ? $v.percentage = 0 : $v.percentage

源码