Axios 进度监控

---

loading

上传下载进度监控，使用onUploadProgress事件

request.js

// 进度百分比（上传/下载）
const progress = ref({ upload: 0, download: 0 }) // 进度
// 已上传/下载的字节数
const downloadedSize = ref({ upload: 0, download: 0 }) // 已上传/下载的大小
// 总字节数
const totalSize = ref({ upload: 0, download: 0 }) // 总大小
// 选中的文件对象
const file = ref(null)

// 上传事件
onUploadProgress: progressEvent => {
  downloadedSize.value.upload = progressEvent.loaded // 已上传字节数
  totalSize.value.upload = progressEvent.total // 总字节数
  if (progressEvent.lengthComputable) {
    // 百分比
    progress.value.upload = Math.round((progressEvent.loaded / progressEvent.total) * 100)
  }
}

// 下载事件
onDownloadProgress: progressEvent => {
  downloadedSize.value.download = progressEvent.loaded // 已上传字节数
  totalSize.value.download = progressEvent.total // 总字节数
  if (progressEvent.lengthComputable) {
    // 百分比
    progress.value.download = Math.round((progressEvent.loaded / progressEvent.total) * 100)
  }
}

进度百分比、传输大小、总文件大小

50%（26.49 KB / 52.98 B）

<div v-if="progress.download > 0">
  {{ progress.download }}%（{{ formatSize(downloadedSize.download) }} / {{ formatSize(totalSize.download) }}）
</div>

格式化文件大小

loading

// 格式化文件大小
const formatSize = bytes => {
  if (bytes === 0 || !bytes) return '0 B'
  const k = 1024
  const sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
  const i = Math.floor(Math.log(bytes) / Math.log(k))
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
}

formatSize(1073741824) // 1 GB

axios取消请求

const controller = ref(null)
// 请求
controller.value = new AbortController()
let res = await axios.get('#',{
  signal: controller.value.signal
})
//取消
controller.value.abort()
controller.value = null

Blob转ObjectURL并下载

function BlobDownload(blob, name) {
  const url = window.URL.createObjectURL(blob)
  const link = document.createElement('a')
  link.href = url
  link.download = name
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
  window.URL.revokeObjectURL(url)
}