【js】监听文件上传下载进度，设置请求头信息与获取响应头信息

监听文件上传下载进度

例子：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)
})