监听文件上传下载进度

例子：html部分

<input type="file" id="selectFile">
<span id="progress1"></span><button id="downloadFile">download</button>
<span id="progress2"></span>

原生xhr实现

const selectFile = document.querySelector('#selectFile')
const progress1 = document.querySelector('#progress1')const downloadFile = document.querySelector('#downloadFile')
const progress2 = document.querySelector('#progress2')selectFile.addEventListener('change', e => {const file = e.target.files[0]const xhr = new XMLHttpRequest()// 跟踪上传进度xhr.upload.onprogress = function(event) {const percent = Math.floor((event.loaded / event.total) * 100)progress1.innerHTML = percent + '%'console.log(`Uploaded ${event.loaded} of ${event.total}, ${percent}%`)}// 跟踪完成：无论成功与否xhr.onloadend = function() {if (xhr.status == 200) {console.log("success")} else {console.log("error " + this.status)}}xhr.open("POST", "upload.php")xhr.send(file)
})downloadFile.addEventListener('click', e => {const xhr = new XMLHttpRequest()xhr.onprogress = function(event) {if (event.lengthComputable) {const percent = Math.floor((event.loaded / event.total) * 100)progress2.innerHTML = percent + '%'console.log(`Received ${event.loaded} of ${event.total} bytes`)} else {console.log(`Received ${event.loaded} bytes`) // 没有 Content-Length}}// 跟踪完成：无论成功与否xhr.onloadend = function() {if (xhr.status == 200) {console.log("success")} else {console.log("error " + this.status)}}xhr.open("GET", "imgs/demo.mp4")xhr.send()
})

使用axios库

const selectFile = document.querySelector('#selectFile')
const progress1 = document.querySelector('#progress1')const downloadFile = document.querySelector('#downloadFile')
const progress2 = document.querySelector('#progress2')
selectFile.addEventListener('change', e => {const file = e.target.files[0]axios({url: 'upload.php',method: 'post',data: file,onUploadProgress: event => {// axios已经对progress进行了封装，可以直接获取计算好的值// const percent = Math.floor((event.loaded / event.total) * 100)const percent = Math.floor(event.progress * 100)progress1.innerHTML = percent + '%'console.log(`Uploaded ${event.loaded} of ${event.total}, ${percent}%`)}}).then(res => {const body = res.dataconsole.log(body)})
})downloadFile.addEventListener('click', e => {axios({url: 'imgs/demo.mp4',method: 'get',onDownloadProgress: event => {// axios已经对progress进行了封装，可以直接获取计算好的值// const percent = Math.floor((event.loaded / event.total) * 100)const percent = Math.floor(event.progress * 100)progress2.innerHTML = percent + '%'console.log(`Received ${event.loaded} of ${event.total} bytes`)}}).then(res => {console.log('success')})
})

设置请求头信息与获取响应头信息

原生xhr实现

const xhr = new XMLHttpRequest()// 跟踪上传进度
xhr.upload.onprogress = function(event) {console.log('progress:', event)const percent = Math.floor((event.loaded / event.total) * 100)progress1.innerHTML = percent + '%'console.log(`Uploaded ${event.loaded} of ${event.total}, ${percent}%`)
}// 跟踪完成：无论成功与否
xhr.onloadend = function() {if (xhr.status == 200) {// 此处获取服务端额外返回的响应header，名字叫X-My-Custom-Headerconst serverExtraHeader = xhr.getResponseHeader('X-My-Custom-Header')// 获取服务器返回的响应Date字段（一般apache和nginx都能返回的服务器时间）const serverDate = xhr.getResponseHeader('Date')const handlerDate = new Date(serverDate)console.log("success:", handlerDate, serverExtraHeader)} else {console.log("error " + this.status)}
}xhr.open("POST", "upload.php")
// 设置更多的请求header，必须放在open之后
xhr.setRequestHeader('extra-header', 'extra-header-value')
xhr.send(file)

使用axios库

axios({url: 'upload.php',method: 'post',data: file,// 设置更多的请求headerheader: {'extra-header': 'extra-header-value'},onUploadProgress: event => {console.log('event:', event)// const percent = Math.floor((event.loaded / event.total) * 100)const percent = Math.floor(event.progress * 100)progress1.innerHTML = percent + '%'console.log(`Uploaded ${event.loaded} of ${event.total}, ${percent}%`)}
}).then(res => {const body = res.data// 获取服务端/服务器返回的响应header，注意：由于axios进行了封装，所有header的key都变成了小写const headers = res.headersconst serverExtraHeader = headers['x-my-custom-header']const serverDate = headers['date']console.log(body, serverExtraHeader, serverDate)
})