上传文件时获取上传进度

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 1 天，点击查看活动详情

要实现上传文件的同时展示上传进度的效果，核心在于实时获取当前进度的数据。在浏览器的 Network 中，可以看到接口的调用时间数据，

那么又该如何获取这个过程及时间变化呢，有如下解决方案：

• 简便方法：使用框架中上传组件自带的进度功能
• 非组件方式：Axios 获取进度

方法一

首先第一种，也是最方便的方式，就是使用上传组件中自带进度条的功能,比如：

ElementUI：

Antd：

查看代码，实际上进度条中进度的展示，需要配置 action 这个选项

所以上述方式，在不使用action 的情况下便无法使用组件中的进度条。想要在上传时获取上传文件的进度，还可以通过 Axios 来实现。

方法二：axios 获取上传进度

获取上传进度的核心方法就是使用 onUploadProgress 回调函数。

progressEvent.loaded / progressEvent.total * 100)，再根据需要进行精度的处理（四舍五入，保留几位小数等等）

• progressEvent.loaded:已上传文件大小
• progressEvent.total:被上传文件的总大小

首先在上传组件下添加进度条代码：

<el-progress :percentage="progressPercent"></el-progress>

然后调用上传接口：

 axios({
    method:'post',
    headers: {
        "Content-Type": "multipart/form-data"
    },
    url:"请求地址",
    data:form,
    onUploadProgress: progressEvent => {
        this.progressPercent =  Number((progressEvent.loaded / progressEvent.total * 100).toFixed(1))
    }
}).then((res)=>{
    if(res.data.code==1){
        console.log('上传成功');
    }else{
        console.log('上传失败');
    }
}).catch((err)=>{
  
})

有的时候项目中的 Axios 是封装好的，可以进行如下操作获取：

封装过的 Axios 如何修改：

import request from '@/utils/request'
export function Upload(data,config) {
    return request({
        url: '',
        method: 'post',
        headers: {
            "content-type": "multipart/form-data"
        },
        data,
        onUploadProgress: config.onUploadProgress
    })
}

调用：

const config = {
  onUploadProgress: progressEvent => {
    this.progressPercent =  Number((progressEvent.loaded / progressEvent.total * 100).toFixed(1)) - 1
  }
}

FileUpload(data,config)
  .then((res) => { 
  
  })

注：当上传文件较大，有时会产生返回的进度已达到100%，但是接口的调用还未执行结束的情况，可以适当调整一下进度值，当调用完毕后设置100%的状态。