Vue - 准确剖析实时监听上传下载进度的独到解决方案：全方位把握文件传输状态

2024-01-09 06:56:35

实时监听 Vue 中的文件传输进度

在现代 Web 开发中，文件上传和下载功能不可或缺。无论是在线提交表单还是下载海量数据集，用户都希望实时了解文件传输的进展情况。作为前端开发中深受欢迎的框架，Vue.js 提供了强大的工具和丰富的生态系统，可以轻松实现文件上传和下载进度的实时监听。

安装依赖项

首先，我们需要安装必需的依赖项：

npm install axios vue-upload-component

其中，axios 是用于发送 HTTP 请求的库，vue-upload-component 是用于处理文件上传的 Vue 组件。

实现实时监听

在 Vue 组件中，我们可以使用 axios 和 vue-upload-component 实现文件上传和下载进度的实时监听：

<template>
  <div>
    <input type="file" @change="uploadFile" multiple>
    <ul id="upload-list"></ul>
  </div>
</template>

<script>
import axios from 'axios'
import VueUploadComponent from 'vue-upload-component'

export default {
  components: { VueUploadComponent },
  methods: {
    uploadFile(e) {
      const files = e.target.files
      for (let i = 0; i < files.length; i++) {
        const formData = new FormData()
        formData.append('file', files[i])

        axios.post('/upload', formData, {
          onUploadProgress: (progressEvent) => {
            const percentage = Math.round((progressEvent.loaded * 100) / progressEvent.total)
            this.$refs['upload-list'].innerHTML += `<li>${files[i].name} - ${percentage}%</li>`
          }
        })
      }
    }
  }
}
</script>

在上面的代码中，我们使用 @change 事件监听文件输入框的变化，当用户选择文件后，会触发 uploadFile 方法。在 uploadFile 方法中，我们使用 axios 发送一个 POST 请求来上传文件，并使用 onUploadProgress 选项来监听上传的进度。当上传进度发生变化时，我们会更新 #upload-list 元素中的内容，显示正在上传的文件名和当前的上传进度。

搭配流行框架构建进度条组件

如果您希望在您的项目中使用 Element UI 或 Ant Design Vue 等流行的前端框架，您也可以轻松地将它们与 vue-upload-component 结合使用，以构建更加美观和交互友好的进度条组件。

例如，如果您使用的是 Element UI，您可以使用以下代码来构建一个进度条组件：

<template>
  <el-progress :percentage="percentage"></el-progress>
</template>

<script>
import { ref } from 'vue'

export default {
  props: {
    percentage: {
      type: Number,
      required: true
    }
  }
}
</script>

然后，您可以在您的 Vue 组件中使用这个进度条组件来显示文件上传或下载的进度：

<template>
  <div>
    <input type="file" @change="uploadFile" multiple>
    <ul id="upload-list"></ul>
    <vue-upload-component
      :on-upload-progress="handleUploadProgress"
      :on-download-progress="handleDownloadProgress"
    >
      <template #progress>
        <el-progress :percentage="percentage"></el-progress>
      </template>
    </vue-upload-component>
  </div>
</template>

<script>
import axios from 'axios'
import VueUploadComponent from 'vue-upload-component'
import Progress from './Progress.vue'

export default {
  components: { VueUploadComponent, Progress },
  data() {
    return {
      percentage: 0
    }
  },
  methods: {
    handleUploadProgress(progressEvent) {
      this.percentage = Math.round((progressEvent.loaded * 100) / progressEvent.total)
    },
    handleDownloadProgress(progressEvent) {
      this.percentage = Math.round((progressEvent.loaded * 100) / progressEvent.total)
    },
    uploadFile(e) {
      const files = e.target.files
      for (let i = 0; i < files.length; i++) {
        const formData = new FormData()
        formData.append('file', files[i])

        axios.post('/upload', formData, {
          onUploadProgress: this.handleUploadProgress
        })
      }
    }
  }
}
</script>

在上面的代码中，我们使用了 <vue-upload-component> 组件来处理文件上传和下载，并使用了 <progress> 插槽来指定进度条组件。当文件上传或下载的进度发生变化时，我们通过 handleUploadProgress 和 handleDownloadProgress 方法来更新 percentage 数据，从而实时更新进度条的显示。

结语

通过本文，您已经掌握了如何在 Vue 中实现文件上传和下载进度的实时监听，并了解了如何搭配 Element UI 和 Ant Design Vue 等流行的前端框架来构建进度条组件。这些技巧将使您能够在您的项目中轻松处理文件传输，并为用户提供直观和友好的用户体验。

常见问题解答