vue文件上传，监听上传速率

最新推荐文章于 2025-02-26 17:13:01 发布

AwoCT

最新推荐文章于 2025-02-26 17:13:01 发布

阅读量2k

点赞数 2

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_39480297/article/details/126019941

版权

vue 专栏收录该内容

20 篇文章

订阅专栏

本文展示了如何使用Axios库在Vue.js应用中实现文件上传，并结合 Vuex 存储和自定义拦截器处理请求，同时通过进度处理函数实时更新上传进度。在Api.js中定义了文件上传接口，store.js中处理Vuex状态，html.js中展示进度。通过计算间隔时间和文件大小变化来估算上传速度和剩余时间。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、axios.js

const service = axios.create({

  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url

  withCredentials: true, // send cookies when cross-domain requests

  timeout: 0, // request timeout

  headers: {

     Accept: 'application/json, text/plain, */*',

     'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'

   }

})

// request interceptor

service.interceptors.request.use(

   config => { // do something before request is sent

      if (store.getters.token) { // let each request carry token

         // ['X-Token'] is a custom headers key

         // please modify it according to the actual situation

         config.headers.token = getCookie('token')

      }

      if (config.file) {

         delete config.responseType

         delete config.transformRequest

      } else {

         config.responseType = 'json'

         config.transformRequest = [function (data) {

            return QS.stringify(data) // 利用对应方法转换格式

        }]

      }

   return config

}, error => { // do something with request error

  return Promise.reject(error)

})

2、Api.js

export function getAPI (data, onUploadProgress) {
  /* 参数：
    caseFile: 病例文件
    projectName：项目名称
  */
  return request({
     url: 'xxx',
     method: 'post',
     data,
     file: true,
     onUploadProgress

  })

}

3、store.js

import { getAPI } from '@/api'

getAPI ({ commit }, parmsInfo) {

   const { parms, onUploadProgress } = parmsInfo

   return new Promise((resolve, reject) => {

      getAPI(parms, onUploadProgress).then(response => {

          const { data } = response

          resolve(data)

       }).catch(error => {

          reject(error)

       })

  })

}

4、html.js


let lastTime = 0 // 上一次计算时间
let lastSize = 0 // 上一次计算的文件大小
function progressHandle(event) {

   /*验证数据*/

   if (lastTime == 0) {

      lastTime = new Date().getTime()

      lastSize = event.loaded

      return

    }

    /*计算间隔*/

    var nowTime = new Date().getTime()

    var intervalTime = (nowTime - lastTime) / 1000 // 时间单位为毫秒，需转化为秒

    var intervalSize = event.loaded - lastSize

    /*重新赋值以便于下次计算*/

    lastTime = nowTime

    lastSize = event.loaded


    /*计算速度*/

    var speed = intervalSize/intervalTime

    var bSpeed = speed // 保存以b/s为单位的速度值，方便计算剩余时间

    var units = 'b/s' // 单位名称

    if (speed / 1024 > 1) {

       speed = speed / 1024

       units = 'k/s'

    }

    if (speed / 1024 > 1) {

      speed = speed / 1024

      units = 'M/s'

    }

    /*计算剩余时间*/

    var leftTime = ((event.total - event.loaded) / bSpeed)

    /*计算进度*/

    var progress = event.loaded/event.total * 100

    console.log('当前进度：' + progress.toFixed(1) + '%    当前速度：' + speed.toFixed(1) + units + '   预计剩余时间：' + leftTime.toFixed(1) + '秒')

  }

  // 调用接口

  let formdata = new FormData()

  formdata.append('files', file)

  this.$store.dispatch('patient/addPatientCase', { parms: formdata, onUploadProgress: progressHandle }).then((res) => {

    // 成功

  }).catch(() => {

  })

修改后的上传进度代码

const onUploadProgress = (progressEvent) => {

  const complete = (progressEvent.loaded / progressEvent.total * 100 | 0)

  /* 计算间隔 */

  const nowTime = new Date().getTime()

  const intervalTime = (nowTime - lastTime) / 1000 // 时间单位为毫秒，需转化为秒

  const intervalSize = progressEvent.loaded – lastSize

  let speed = 0

  /* 验证数据 */

  if (lastTime == 0) {

     lastTime = new Date().getTime()

     lastSize = progressEvent.loaded

     speed = lastSize

   } else {

     /* 重新赋值以便于下次计算 */

     lastTime = nowTime

     lastSize = progressEvent.loaded

     speed = intervalSize / intervalTime

   }

   let units = 'b/s' // 单位名称

   if (speed / 1024 > 1) {

      speed = speed / 1024

      units = 'k/s'

    }

    if (speed / 1024 > 1) {

       speed = speed / 1024

       units = 'M/s'

   }
   
   // 改变表格试图中的数据及进度
   this.tableData[count].speed = speed.toFixed(2) + units

   this.tableData[count].progress = complete

   this.$set(this.tableData, count, this.tableData[count])

}