element-ui 文件上传进度

自定义上传进度

on-progress 文件上传时的钩子 function(event, file, fileList)

• evnet 参数

ProgressEvent {isTrusted: true, percent: 100, lengthComputable: true, loaded: 17830, total: 17830, …}
isTrusted: true
lengthComputable: true
loaded: 17830
total: 17830
type: "progress"
target: XMLHttpRequestUpload {onloadstart: null, onabort: null, onerror: null, onload: null, onprogress: ƒ, …}
currentTarget: XMLHttpRequestUpload {onloadstart: null, onabort: null, onerror: null, onload: null, onprogress: ƒ, …}
eventPhase: 0
bubbles: false
cancelable: false
defaultPrevented: false
composed: false
timeStamp: 4929.040000075474
srcElement: XMLHttpRequestUpload {onloadstart: null, onabort: null, onerror: null, onload: null, onprogress: ƒ, …}
returnValue: true
cancelBubble: false
path: []
percent: 100
__proto__: ProgressEvent

• console.log(event.percent)你就会发现在上传过程中连续打印多个值

ProgressEvent {isTrusted: true, percent: 11.901059369100029, lengthComputable: true, loaded: 589824, total: 4956063, …}
index.vue?6e93:158 11.901059369100029
index.vue?6e93:157 ProgressEvent {isTrusted: true, percent: 34.380838177400086, lengthComputable: true, loaded: 1703936, total: 4956063, …}
index.vue?6e93:158 34.380838177400086
index.vue?6e93:157 ProgressEvent {isTrusted: true, percent: 50.57950231867513, lengthComputable: true, loaded: 2506752, total: 4956063, …}
index.vue?6e93:158 50.57950231867513
index.vue?6e93:157 ProgressEvent {isTrusted: true, percent: 74.05103607440019, lengthComputable: true, loaded: 3670016, total: 4956063, …}
index.vue?6e93:158 74.05103607440019
index.vue?6e93:157 ProgressEvent {isTrusted: true, percent: 95.20847495280023, lengthComputable: true, loaded: 4718592, total: 4956063, …}
index.vue?6e93:158 95.20847495280023
index.vue?6e93:157 ProgressEvent {isTrusted: true, percent: 100, lengthComputable: true, loaded: 4956063, total: 4956063, …}
index.vue?6e93:158 100

接下来你就可以使用el-progress把进度赋值就好啦