一、bug描述

在使用 element-ui 的 el-upload 组件时，发现其中的 on-progress 事件无法触发导致配套使用的 el-progress 组件效果不生效。而且诡异的是这个问题只在生产环境出现，本地环境一切正常。

二、排查过程

1.既然是 production 环境下才有这个问题，第一想法就是全局搜索 “production” 关键字看下有没有一些特殊的配置，发现在main.js里面有关于mock的设置，如下图：

但暂时来看跟 el-upload 组件好像没任何关系

2.然后只能去源码里查查有没有线索，发现upload组件还自带了一个 ajax.js 文件

路径：./node_modules/element-ui/upload/src

我们都知道，使用ajax进行文件上传时想要监控上传进度必须要依靠ajax里面的onprogress 方法（在axios中则是依靠 onUploadProgress 方法）

3.再联想到之前的main.js文件里面mockjs的相关配置，打开mockjs的源码，问题答案就逐渐开始清晰起来了

路径：/node_modules/mockjs/src/mock.js

三、问题原因

在production环境中由于开启了mock服务，mockjs自身会拦截请求且mockjs自己定义的xhr对象会覆盖掉el-upload 组件中定义的xhr对象。

四、解决办法：

1.如果确保项目不需要用到mockjs，可以像我一样简单粗暴直接注释掉

2.如果注释mockjs会对项目影响太大，el-upload组件还提供了一个 on-change() 方法，这个方法会在下载开始和下载完成都执行一次。可以自己手动去制造“进度条”增长的效果。

handleOnChange(file,fileList){
   if(file.status==='ready'){
   this.percentage =0;
   this.showProgress = true;
    const interval = setInterval(()=> {
        if (that.percentage >= 99) {
           clearInterval(interval)
           return;
        }
    },50)
   }
   
   if(file.status==='success'){
       this.percentage =100;
       this.showProgress = false;
   }
}