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

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

步骤一:安装所需库

首先要安装axiosvue-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>

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:vue实现实时上传文件进度条 - Python技术站

(0)
上一篇 2023年5月28日
下一篇 2023年5月28日

相关文章

  • Vuejs第九篇之组件作用域及props数据传递实例详解

    Vuejs第九篇之组件作用域及props数据传递实例详解 在Vue中,组件是一种抽象的模板,可以用来描述页面上的UI组件,使得页面结构更加清晰、易于维护。在使用Vue组件时,往往需要借助props数据传递来实现组件之间数据的通信。那么组件作用域及props数据传递的实例是什么呢?接下来就详细讲解一下。 组件的作用域 组件作用域是指在组件实例中,可以访问哪些数…

    Vue 2023年5月28日
    00
  • Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)

    下面我将为您详细讲解如何使用Vue.js实现双向数据绑定,包括表单自动赋值和表单自动取值。 什么是双向数据绑定 在介绍如何实现双向数据绑定方法之前,先来简单了解一下什么是双向数据绑定。双向数据绑定是指数据模型和视图层之间的自动同步。在Vue.js中,数据模型和视图层之间的绑定是单向的,也就是说,当我们改变数据模型时,视图层会自动更新;但是,当我们修改视图层的…

    Vue 2023年5月28日
    00
  • Vue echarts封装实现流程

    下面是详细的Vue echarts封装实现流程攻略。 1. 创建 Vue 组件 首先,在 Vue 项目中进行 echarts 封装前需要先创建一个 Vue 组件。 <template> <div ref="main" :style="{ width: ‘100%’, height: ‘100%’ }"…

    Vue 2023年5月27日
    00
  • vue生成文件本地打开查看效果的实例

    让我来详细讲解一下“Vue生成文件本地打开查看效果的实例”的完整攻略。整个过程分为以下几个步骤: 1. 安装Vue Cli 首先,我们需要全局安装Vue的脚手架工具Vue Cli。可以使用以下命令进行安装: npm install -g @vue/cli 2. 创建Vue项目 使用Vue Cli创建一个新的Vue项目。 vue create my-proje…

    Vue 2023年5月28日
    00
  • vue3+ElementPlus使用lang=”ts”报Unexpected token错误的解决办法

    首先需要明确的是,vue3和ElementPlus均支持使用TypeScript语言进行开发,因此我们可以使用lang=”ts”来指定代码的语言类型。但是,如果在使用过程中出现了Unexpected token错误,需要进行以下的解决办法。 确认项目是否已经安装了必要的依赖 在使用TypeScript时,我们需要安装一些必要的依赖,例如ts-loader、t…

    Vue 2023年5月28日
    00
  • 使用Vue中 v-for循环列表控制按钮隐藏显示功能

    使用Vue中v-for循环列表控制按钮隐藏显示功能分为以下几个步骤: 在Vue实例中定义数据:需要定义一个存储列表数据的数组,以及每个元素对应的控制按钮是否显示的状态变量。比如: data() { return { list: [ { id: 1, name: ‘item 1’, showButton: false }, { id: 2, name: ‘it…

    Vue 2023年5月29日
    00
  • 程序员应该知道的vuex冷门小技巧(超好用)

    程序员应该知道的vuex冷门小技巧(超好用) 什么是Vuex Vuex是一个专为Vue.js应用程序开发的状态管理模式,可以集中管理Vue.js应用程序中的各种数据,并使不同组件间的数据共享变得更加便捷。 Vuex冷门小技巧 1. 使用vuex-map-fields轻松实现表单双向绑定 在实现表单数据双向绑定时,我们通常需要手动编写 computed 属性来…

    Vue 2023年5月27日
    00
  • vue函数@click.prevent的使用解析

    当我们使用Vue.js开发前端应用时,经常会在模版中使用@click指令来响应用户的点击事件,在一般情况下,点击事件会导致页面的跳转或刷新等行为,但是有时候我们需要控制点击事件的默认行为,这时候就需要使用@click.prevent修饰符。 @click.prevent能够阻止点击事件的默认行为,例如在表单的提交按钮中使用@click.prevent可以阻止…

    Vue 2023年5月28日
    00
合作推广
合作推广
分享本页
返回顶部