上传文件，页面loading显示文件上传进度

做项目时，弹窗上传文件时，上传动作无法停止，需要加一个蒙层，阻止上传文件过程中的用户操作，并显示文件上传进度，效果如图。

页面上传文件函数

/*
 * 上传文件函数
 */
uploadFile(){
    let config = {
        onUploadProgress: progressEvent => {
            let percent = (progressEvent.loaded / progressEvent.total * 100 | 0) + '%'
            //实时设置loading显示的文件上传进度
            this.waiting.setText('文件上传中，' + percent + '...');
        }
    }
    api.file.upload(file, config).then(res => {
        this.waiting.close();
    })
}

/**
 * 等待效果
 */
showLoading() {
    this.waiting = this.$loading({
        lock: true,
        text: '',
        spinner: 'el-icon-loading',
        background: 'rgba(255,255,255,0.8)'
    })
}

api文件file.js

upload(file, config) {
    return axios.post('/xxx/yyy', file, config)
}