突破上传瓶颈：vue+axios联手打造实时进度条

2023-11-10 09:52:29

前言
最近在用vue写上传功能时，遇到一个需求，就是在页面上展示上传的进度条。之前写过一次，但那时用的是假交互，直接从0到100。今天，就来分享一下如何用axios自带的onUploadProgress来完成这个小需求。

认识onUploadProgress

onUploadProgress是axios的一个事件侦听器，可以让我们在文件上传过程中，实时获取上传进度。它的语法如下：

onUploadProgress(progressEvent) {
  // 这里可以获取上传进度
}

开始实战

1. 安装依赖

首先，需要在项目中安装axios，以及file-saver（用于文件保存）：

npm install axios file-saver

2. 编写上传组件

接着，编写一个上传组件，负责文件上传的功能：

<template>
  <div>
    <input type="file" @change="uploadFile">
    <progress v-if="progress" :value="progress" max="100"></progress>
  </div>
</template>

<script>
import axios from 'axios'
import fileSaver from 'file-saver'

export default {
  data() {
    return {
      progress: null
    }
  },
  methods: {
    uploadFile(event) {
      const file = event.target.files[0]
      const formData = new FormData()
      formData.append('file', file)

      axios.post('/upload', formData, {
        onUploadProgress: (progressEvent) => {
          this.progress = Math.round(progressEvent.loaded * 100 / progressEvent.total)
        }
      })
      .then((response) => {
        fileSaver.saveAs(response.data, file.name)
      })
    }
  }
}
</script>