Element: The on progress method fails when the upload component uses HTTP request to upload

[gaochunchao]

Element UI version

2.13.2

OS/Browsers version

win10

Vue version

3.0.0-beta.15

Reproduction Link

https://codepen.io/SubSpring/pen/jOWMxqv?editable=true%3Dhttps%3A%2F%2Felement.eleme.cn%2F

Steps to reproduce

使用自定义上传方式进行附件上传，同时需要显示它的上传进度，但是点击上传后，上传成功，整个过程却没有触发on-progress方法

What is Expected?

能正常显示上传进度

What is actually happening?

使用自定义上传方式进行附件上传，同时需要显示它的上传进度，但是点击上传后，上传成功，整个过程却没有触发on-progress方法

[element-bot]

Translation of this issue:

Element UI version

2.13.2

OS/Browsers version

win10

Vue version

3.0.0-beta.15

Reproduction Link

https://codepen.io/SubSpring/pen/jOWMxqv?editable=true%3Dhttps%3A%2F%2Felement.eleme.cn%2F

Steps to reproduce

The user-defined upload method is used to upload the attachment, and the upload progress needs to be displayed at the same time. However, after clicking upload, the upload succeeds, and the whole process does not trigger the on progress method

What is Expected?

Display upload progress normally

What is actually happening?

The user-defined upload method is used to upload the attachment, and the upload progress needs to be displayed at the same time. However, after clicking upload, the upload succeeds, and the whole process does not trigger the on progress method

[cathy0023]

I have a similar problem. There is no progress bar for upload components after npm run build, but in dev development is visible. Has this problem been solved？

[noobswestand]

I am having the same issue as @cathy0023

[shengwubin]

@gaochunchao @cathy0023 @noobswestand I find that if you remove :http-request="httpRequest" in the previous code example, then all things should work. My guess is that the http-request might override the original object so that some event handlers cannot be triggered.
https://element.eleme.io/#/en-US/component/upload

My initial problem occurs in my project while working with a dashboard project. https://github.com/PanJiaChen/vue-element-admin , and after building the frontend project, the Upload component cannot display the progress bar. The author mentions that https://github.com/PanJiaChen/vue-element-admin/issues/445 that removing mockjs will fix the problem. In vue-element-admin project, after commenting the code in main.js:

if (process.env.NODE_ENV === 'production') {
const {mockXHR} = require('../mock');
mockXHR();
}
I got no problem at all.