ElemeFE / ElemeFE/element

[Bug Report] upload 组件覆写http-request后,file插槽的作用域对象进度属性-percentage值为0

Open
#21,766 3 comments 1 reaction 0 assignees View on GitHub
Dominant language
Vue
Stars
54k
Forks
14.4k
PR merge metrics
No merged PRs in 30d

Description

### Element UI version
2.15.3

### OS/Browsers version
win11 chrome 99.0.4844.82

### Vue version
2.6.12

### Reproduction Link
https://codepen.io/tnnevol/pen/rNpmydV

### Steps to reproduce
1. 传入http-request,覆盖默认的上传行为。
2. 在file插槽的作用域中获取file对象,并重写上传后的列表样式,获取到file中percentage属性值一直为0

### What is Expected?
1. 使用upload组件props的http-request,覆盖默认上传行为后,可以在file插槽中返回文件上传进度属性percentage的正常值。
2. 请完善upload组件使用http-request props的案例,在http-request方法返回的options中,提供的onProgress、onSuccess和onError方法,有哪些需要第三方自行调用,有哪些不需要再次调用。

### What is actually happening?
官方封装的ajax,在ProgressEvent中增加了一个percent属性,并且在upload组件中获取ProgressEvent自定义的属性,导致使用http-request覆写后上传进度值为0。
```javascript
// ajax
if (xhr.upload) {
xhr.upload.onprogress = function progress(e) {
if (e.total > 0) {
e.percent = e.loaded / e.total * 100;
}
option.onProgress(e);
};
}
```
```javascript
// upload methods
handleProgress(ev, rawFile) {
const file = this.getFile(rawFile);
this.onProgress(ev, file, this.uploadFiles);
file.status = 'uploading';
file.percentage = ev.percent || 0;
}
```

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.