Element UI Loading 加载组件动态变更 text

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

该组件的使用方式如下：

// 加载开始
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()
  })
}

这里的 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 可以实现哪些常见的有用的功能