阅读 309

Element UI Loading 加载组件动态变更 text 值(加载文案)

有这样的一个需求,我在上传文件的时候,上传阶段耗时较长,所以利用加载动画作为友好提示用户等待。

20719067-f6977415f661b723.png

该组件的使用方式如下:

// 加载开始
let loading = Loading.service({
  fullscreen: true,
  text: '正在上传'
})

// 加载结束
loading.close()
复制代码

如果我想在 loading 的时候,同时显示上传的进度值,于是我在 text 值里拼接上进度值变量,发现只显示最初的进度变量值,并没有随着变量的改变而更新视图

 let loading = Loading.service({fullscreen: true, text: '正在上传' + this.uploadRate})
复制代码

官方文档里也没有提供能动态改变加载文案的 API,网上看到有人说可以使用 setText 来设置 text 值,于是使用以下方法试了试,还真的可以

uploadHandler(data) {
  let formData = new FormData()
  formData.append('file', data.file)
  formData.append('fileName', data.file.name)
  let loading = Loading.service({fullscreen: true, text: '正在上传'})
  uploadFile(formData, (e) => {
    if (e.lengthComputable) {
      let uploadRate = e.loaded / e.total * 100
      loading.setText(`已上传 ${uploadRate.toFixed(1)}%`)
    }
  }).then(res => {
    // ......
  }).catch(err => {
    this.$message.error(err.data.message)
  }).finally(() => {
    loading.close()
  })
}
复制代码

20719067-ff3fbfe383b5e035.png

这里的 uploadFile 是定义的上传接口, 上传进度使用第二个参数回调过来,正好 axios 提供了 onUploadProgress 事件,并且提供了 progressEvent 参数,progressEvent 参数中包括了 loaded(已经上传的文件大小)和total(上传文件总大小)属性,通过这两个值就可以算出当前已上传的百分比,从而显示出上传进度了。

import request from '@/utils/request'

export function uploadFile (parameter, onUploadProgress) {
  return request({
    url: '/upload-file',
    method: 'post',
    data: parameter,
    headers: {
      'Content-Type': 'multipart/form-data'
    },
    onUploadProgress
  })
}
复制代码

更多使用Element的经验帖:

ElementUI 为 DatePicker 日期选择器组件添加前缀说明文字
生成以周统计的表头,跨月份的周算在后一个月
Element Table 可以实现哪些常见的有用的功能

文章分类
前端