动态修改ElementUI中Loading的text

最新推荐文章于 2024-11-13 16:02:39 发布

ZiuC

最新推荐文章于 2024-11-13 16:02:39 发布

阅读量5.9k

点赞数 4

分类专栏：前端文章标签： elementui vue.js javascript

本文链接：https://blog.csdn.net/Huuc6/article/details/121707439

版权

前端专栏收录该内容

24 篇文章

订阅专栏

在Vue.js项目中，使用ElementUI的Loading组件进行文件上传时，为了改善大文件上传时用户体验，需动态修改Loading的文本以显示上传进度。通过在组件的data中定义上传配置，并设置回调函数监听上传进度，利用Loading实例的方法更新文本属性，从而实现上传进度的实时显示。然而，直接在data中修改值无法实现动态加载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目有文件上传功能，文件上传过程中，通过Loading遮罩：

const loading = Loading.service({
    lock: true,
    text: '文件上传中',
    spinner: 'el-icon-loading'
});

在这里插入图片描述

展示上传过程，小文件上传体验尚可，但在上传大文件时，界面被长期占用体验较差。

希望能动态修改展示文本text，将上传进度显示在其上。

解决方法

项目由Vue构建，用axios实现上传，axios的config属性由data传入，

Loading.service被实例化为loading：

config: {
    headers: {
        'token': Cookies.get('token'),
        'Content-Type': 'multipart/form-data'
    },
}
const loading = Loading.service({
                        lock: true,
                        text: '文件上传中',
                        spinner: 'el-icon-loading'
				});
axios.post(upurl, param, config)
    .then(response => {
        loading.close();
        if (response.data.code !== 0) {
            alert(response.data.message);
        }
        else {
            alert('上传成功！请刷新页面');
        }
	})

于是我定义了request函数，通过在return中加入回调函数progressEvent实现监听上传进度，

给回调函数传入loading实例，在回调函数中计算上传百分比uploadPercentage并通过loading.setText("")方法修改loading实例的text属性。

axios.post(upurl, param, request(loading))
    .then(response => {
        loading.close();
        if (response.data.code !== 0) {
            alert(response.data.message);
        }
        else {
            alert('上传成功！请刷新页面');
        }
	})

request(loading) {
    return {
        headers: {
            'token': Cookies.get('token'),
            'Content-Type': 'multipart/form-data'
        },
        onUploadProgress: progressEvent=>{
            if(progressEvent.lengthComputable){
                let uploadPercentage = (progressEvent.loaded / progressEvent.total) * 100;
                loading.setText('已上传：['+uploadPercentage+'%]');
            }
            else console.log('error');
        },
    }
}

最终效果：

在这里插入图片描述

遇到的问题

最初，尝试在data中直接修改config，在config中加入回调函数，

并在data中定义新的percentage变量，注册实例时将percentage传入text，

但这样的操作会导致text只能够保存初值，后续不会实现进度的动态加载。

config: {
    headers: {
        'token': Cookies.get('token'),
            'Content-Type': 'multipart/form-data'
    },
    progressEvent => {
        if(progressEvent.lengthComputable){
            this.percentage = (( (progressEvent.loaded / progressEvent.total) * 100) | 0);
        }
        else console.log('error');
    }
}

let loading = Loading.service({
                        lock: true,
                        text: '文件上传进度：['+this.percentage+'%]',
                        spinner: 'el-icon-loading'
				});