duration中文谐音前端实现⽂件上传下载进度显⽰
介绍
项⽬开发中，在⽂件上传或者下载的过程中，经常因为⽂件过⼤导致访问接⼝的时间过长。所有需要添加⼀个反馈来显⽰当前⽂件上传/下载的进度。
以下内容以⽂件下载为例
axios
快速通道：
随机数表法如何读数重复了怎么办
查阅官⽹发现有以下两个配置项
代码实现
// onDownloadProgress 接收⼀个函数
gpa是什么意思?// progressEvent.loaded 已下载的⽂件⼤⼩
// al 全部⽂件⼤⼩
axios({
url:'/download/excel-api/export',
onDownloadProgress:function(progressEvent){
let process =(progressEvent.loaded / al *100|0)
let progressText =`下载进度：${process}%`
console.log(progressText);
}
})
ajax
查jQuery⽂档，发现jQuery的ajax没有相应的事件，但是有xhr属性，可以配置XMLHttpRequest中的progress事件
代码实现
// 这⾥需要注意xhr接收的是⼀个函数，所以需要返回⼀个函数 () => xhr
var addProgressForXhr=(fn)=>{
excel函数乘法符号
var xhr = $.ajaxSettings.xhr()
if(typeof fn =="function"){
}
return()=> xhr
}
$.ajax({
url:'/download/excel-api/export',
xhr:addProgressForXhr(function(e){
let process =(e.loaded / e.total *100)jquery下载文件请求
let progressText =`下载进度：${process}%`
console.log(progressText);
零基础的话怎样自学编程})
})
可能遇到的问题
progressEvent下total的值若⼀直都是0，查看下载接⼝中响应头的ContentLength字段是否有返回。该值需要后端⼈员在接⼝的响应头中添加

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。