下载文件实现进度条显示

利用axios封装的原生onDownloadProgress属性，该属性为一个回调方法，当axios请求将文件从服务器下载时会进行回调。接收一个回调参数，该回调参数中包含总下载进度，当前下载进度。不多比比直接上代码

<template>
  <div>
      <button @click="downLoad">下载</button>

      <p>
          下载进度:{{downLoadProgress}}
      </p>

  </div>
</template>


<script setup>
import { ref } from '@vue/reactivity';
import axios from 'axios'


var downLoadProgress=ref(0) //定义下载进度
//下载
var downLoad=function(){
    axios({
        url:"http://localhost:3232/api/download",
        responseType:'blob',
        params:{
            fileName:'Russ - Psycho (Pt. 2).mp4'
        },
         // onDownloadProgress 配置该属性代表允许为下载处理进度事件
   		 onDownloadProgress: function (progressEvent) {//axios封装的原生获取下载进度的事件，该回调参数progressEvent中包含下载文件的总进度以及当前进度
         if (progressEvent.lengthComputable) {
                        //属性lengthComputable主要表明总共需要完成的工作量和已经完成的工作是否可以被测量
                        //如果lengthComputable为false，就获取不到progressEvent.total和progressEvent.loaded
                         downLoadProgress.value = progressEvent.loaded / progressEvent.total * 100 //实时获取最新下载进度
                    }
    },
    }).then(res=>{
        console.log(res)
        let link = document.createElement("a");
    link.href = URL.createObjectURL(res.data);
    link.download = '午夜鸡铃.mp4';
    document.body.appendChild(link);
    link.click();
    URL.revokeObjectURL(link.href);

    })
}



</script>

上传文件实现进度条显示

其实和下载文件进度条显示操作是一样的，axios也同样封装了一个当文件上传至服务器时回调的一个事件。这个事件叫onUploadProgress，与onDownloadProgress一样的配置方法，一样的回调参数。下面直接上代码

<template>
  <div>
      <input type="file" @change="upload">上传</button>

      <p>
          上传进度:{{upProgress}}
      </p>

  </div>
</template>


<script setup>
import { ref } from '@vue/reactivity';
import axios from 'axios'


var upLoadProgress=ref(0) //定义上传进度
//上传
var upload=function(event){
 
            let file = event.target.files[0] //获取选中的文件
 
            const formData = new FormData() //声明一个formdata对象，用于存储file文件以及其他需要传递给服务器的参数
 
            formData.append('userName', 'admin')
            formData.append('projectId', '735136fcf95a41248cc94127f7963ea8')
            formData.append('file', file)
 
 
            console.log('formData', formData)

    axios({
        url:"http://localhost:3232/api/upload",
            method: 'post',
            headers: {
                Authorization: 'sdfasfsfwrfrwerrrrrrrrrrrfbdddddddddddddd',
                'Content-Type': 'multipart/form-data'
                },
            data: formdata,
            onUploadProgress: function (progressEvent) { //原生获取上传进度的事件
                    if (progressEvent.lengthComputable) {
                        //属性lengthComputable主要表明总共需要完成的工作量和已经完成的工作是否可以被测量
                        //如果lengthComputable为false，就获取不到progressEvent.total和progressEvent.loaded
                      upLoadProgress= progressEvent.loaded / progressEvent.total * 100 //实时获取上传进度
                    }
                }
		
    },
    }).then(res=>{
        console.log(res)


    })
}

参考：https://www.jianshu.com/p/2ec9cc044096 作者：边缘青年_739d