有这样的一个需求，我在上传文件的时候，上传阶段耗时较长，所以利用加载动画作为友好提示用户等待。
该组件的使用方式如下：
// 加载开始 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 日期选择器组件添加前缀说明文字
