vue实现实时上传文件进度条

实现文件上传进度条需要借助一些第三方库，如axios和vue-progressbar，下面是具体的实现步骤和示例代码。

步骤一：安装所需库

首先要安装axios和vue-progressbar库，可以通过npm进行安装，命令如下：

npm install axios vue-progressbar --save

步骤二：创建Vue实例并引入Vue进度条插件

在Vue实例中引入vue-progressbar插件，并自定义进度条的样式，代码如下：

import Vue from 'vue'
import VueProgressBar from 'vue-progressbar'

Vue.use(VueProgressBar, {
  color: 'rgb(35, 137, 218)',
  failedColor: 'red',
  thickness: '3px',
  transition: {
    speed: '0.2s',
    opacity: '0.6s',
    termination: 300
  },
  autoRevert: true,
  location: 'top',
  inverse: false
})

步骤三：创建上传文件组件并实现上传方法

在Vue组件中创建上传文件的方法，并使用axios库来进行文件上传，同时在上传过程中调用进度条的方法来实现实时上传进度的显示。

<template>
  <div>
    <input type="file" @change="onFileChange"/>
    <button @click="uploadFile">上传</button>
  </div>
</template>

<script>
import axios from 'axios'
import { progressBar } from 'vue-progressbar' // 引入进度条相关方法

export default {
  name: 'UploadFile',

  methods: {
    onFileChange(event) {
      this.file = event.target.files[0]
    },

    uploadFile() {
      let formData = new FormData()
      formData.append('file', this.file)

      // 发起文件上传请求，同时使用进度条方法来实现实时进度显示
      axios.post('/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        },
        onUploadProgress: function(progressEvent) {
          progressBar.$Progress.set((progressEvent.loaded / progressEvent.total) * 100)
        }
      })
      .then(response => {
        console.log(response)
      })
      .catch(error => {
        console.log(error)
      })
    }
  }
}
</script>

示例一：使用element-ui实现上传文件进度条

下面是使用element-ui库来实现上传文件进度条的示例代码：

<template>
  <div>
    <el-upload
      action="/upload"
      :before-upload="beforeUpload"
      :on-progress="onProgress"
      :on-success="onSuccess">
      <el-button>点击上传</el-button>
    </el-upload>
  </div>
</template>

<script>
import axios from 'axios'
import { Loading } from 'element-ui'

export default {
  name: 'UploadFile',

  data() {
    return {
      loadingInstance: null
    }
  },

  methods: {
    beforeUpload() {
      // 创建弹出框等待提示
      this.loadingInstance = Loading.service({
        fullscreen: true,
        text: '文件上传中...'
      })
    },

    onProgress(event) {
      // 进度条显示上传进度
      this.loadingInstance.setText(`文件上传中...${event.percent}%`)
    },

    onSuccess(response, file, fileList) {
      // 关闭弹出框等待提示
      this.loadingInstance.close()
      console.log(response)
    }
  }
}
</script>

示例二：使用iview实现上传文件进度条

下面是使用iview库来实现上传文件进度条的示例代码：

<template>
  <div>
    <i-upload
      name="file"
      action="/upload"
      :on-progress="onProgress"
      :custom-request="customRequest"
      show-upload-list>
      <div style="padding: 20px;">
        <Icon type="ios-cloud-upload" size="52" style="color: #3399FF"></Icon>
        <p>将文件拖到此处，或<i-button type="primary">点击上传</i-button></p>
      </div>
    </i-upload>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'UploadFile',

  methods: {
    onProgress(event) {
      // 设置上传进度
      this.$refs.upload.updateProgress(event.percent)
    },

    customRequest(options) {
      // 创建FormData对象，并存入文件数据
      let formData = new FormData()
      formData.append('file', options.file)

      // 发送上传请求
      axios.post(options.action, formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        },
        onUploadProgress: function (progressEvent) {
          // 设置上传进度
          options.onProgress(progressEvent)
        }
      })
      .then(response => {
        console.log(response)
      })
      .catch(error => {
        console.log(error)
      })
    }
  }
}
</script>