监听文件上传下载进度
例子: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.data
console.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-Header
const 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,
// 设置更多的请求header
header: {
'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.headers
const serverExtraHeader = headers['x-my-custom-header']
const serverDate = headers['date']
console.log(body, serverExtraHeader, serverDate)
})