jq ajax 和 axios 获取上传进度的方法

在很多时候，前端文件上传需要获取进度。不多说，直接上代码

$.ajax({
    type: 'POST',
    url: url,
    data: obj,
    timeout: 30000,
    dataType: 'json',
    xhr: () => {
        var xhr = new XMLHttpRequest();
        var that = this;
        //使用XMLHttpRequest.upload监听上传过程，注册progress事件，打印回调函数中的event事件
        xhr.upload.addEventListener('progress', function (e) {
            //console.log(e);
            //loaded代表上传了多少
            //total代表总数为多少
            var progressRate = (e.loaded / e.total) * 100;
            progressRate = parseInt(progressRate);
            console.log(progressRate)
            that.currentRate = progressRate
            //通过设置进度条的宽度达到效果
            //$('.progress > div').css('width', progressRate);
        })
        //其实，准确的来说，在需要获取上传进度的时候，返回的上传结果应该是在这晨面的，不应该在success里。
        //原因是会有一小点的时间差距
        return xhr;
    },
    success: (res) => {
        let len = this.upfileList.length;
        let obj = this.upfileList;
        obj = obj[len - 1]
        obj.id = res.Id;
        this.ListImg.push(obj.id)
        this.overlayShow = false;
        this.previewImage = true;
        resolve({ msg: '上传成功', name: file.name, size: file.size })
    },
    error: (err) => {
        setTimeout(() => {
            this.overlayShow = false;
            this.upfileList = that.upfileList.slice(0, -1);
        }, 500)
        reject('上传失败')
    }
})

我这代码是用vue + jq 写的。当然，实际中很少这样子去写，主要是不规范。这儿，我们先不管这个，主要先实现功能。注释什么的也都在代码里面。当然，我这也是在网上找的。
下面是原作者的截博文地址
https://blog.csdn.net/a460550542/article/details/123004777?spm=1001.2101.3001.6650.6&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-6-123004777-blog-127721856.pc_relevant_default&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-6-123004777-blog-127721856.pc_relevant_default&utm_relevant_index=11

axios获取上传和下载进度的方法

//获取下载进度
downFun(){
    axios.post({
        url,url,
        params:{},
        onDownloadProgress:(e)=>{
            //获取下载进度
        }
    })
    .then(res=>{

    })
    .catch(err=>{

    })
}


//获取上传进度
uploadFun(){
    axios.post({
        url:url,
        params:{},
        onUploadProgress:(e)=>{
            //获取上传进度
        }
    })
    .then(res=>{

    })
    .catch(err=>{
        
    })
}