el-upload在实现文件上传时无法触发on-progress钩子,即使调用后端接口并成功的情况下都无法触发,可以通过如下配置来解决:
const config = {
onUploadProgress: progressEvent => {
if (progressEvent.lengthComputable) {
this.uploadProgress = Math.round((progressEvent.loaded / progressEvent.total) * 100)
console.log('progressEvent>>', progressEvent)
console.log('uploadProgress>>', _this.uploadProgress)
}
}
}
随后将config添加至调用后端接口,即可成功获取进度~
html:
前端-上传文件获取进度条:
<el-upload
v-show="!fileList.length"
ref="fileUpload"
class="upload-demo"
style="display: inline-block;height: 32px;margin-left: 8px"
action="#"
:file-list="fileList"
:http-request="uploadVersion"
:on-change="handleChange"
:on-success="handleSuccess"
:on-progress="handleProgress"
:on-error="handleError"
:auto-upload="true"
:show-file-list="false"
>
<!-- icon_upload.svg-->
<el-button type="primary" style="