2020-01-09 本地上传文件速率的计算_el-upload 文件上传速度-优快云博客

本文链接：https://blog.youkuaiyun.com/xumaozeng/article/details/103906790

本文介绍了在Vue项目中，使用element-ui的el-upload组件计算文件上传速率的方法。通过el-upload的钩子函数获取已加载文件大小和时间，计算每片文件上传速率。同时，讨论了大文件上传的步骤，包括文件切片、并发上传、进度和速度显示，以及文件秒传和暂停上传的实现策略。

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

2020-01-09 本地上传文件速率的计算

描述：项目中对上传视频文件要求显示进度和速率

文件上传使用的组件是element-ui中的el-upload

使用el-upload中的钩子函数on-progress和before-upload中的参数计算出上传速率

<el-upload
      class="uploadVideo"
      ref="uploadVideo"
      action="/static/videoFile"
      :on-progress="onProgress"   // 文件上传时的钩子(function(event, file, fileList))
      :before-upload="beforeUpload"  // 上传文件之前的钩子，参数为上传的文件(function(file))
      :show-file-list="false"
      accept="video/*"
    >
      <el-button type="primary">
        <i class="iconfont icon-yunshangchuan my-btn"></i>本地上传
      </el-button>
    </el-upload>

使用上传时的钩子函数on-progress，这时候会把一个文件自动分为多个文件片段上传，保存在event参数里，从这个参数里取出loaded已加载的文件大小（字节），顺便设置当前时间
使用上文件之前的钩子函数before-upload，在这函数里设置初始时间，这样loaded减去上一个已加载的loaded（初始为0）在除以时间差在做下转换处理就可以得到这片段上传的速率了

计算文件上传速率函数

//