2021-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）在除以时间差在做下转换处理就可以得到这片段上传的速率了

计算文件上传速率函数

// 上传速度
    uploadSpeed(evt) {
      let timestamp = new Date().valueOf();
      let duration = timestamp - this.oldTimestamp; // 间隔时间（毫秒）
      if (duration > 0) {
        let size = evt.loaded - this.oldLoadsize;
        let bitrate = ((size * 8) / duration / 1024) * 1000; // kbps
        if (bitrate > 1000) {
          bitrate = Math.round(bitrate / 1000) + "Mbps";
        } else {
          bitrate = Math.round(bitrate) + "Kbps";
        }
        this.oldLoadsize = evt.loaded;
        return bitrate;
      }
    },

每个文件都有个唯一值，这个值就是MD5，获取方法如下

// 获取视频文件的MD5值
    getFileMD5(file) {
      let that = this;
      let blobSlice =
        File.prototype.slice ||
        File.prototype.mozSlice ||
        File.prototype.webkitSlice;
      let fileObj = file;
      let fileReader = new FileReader();
      let chunkSize = fileObj.size; // 将整个文件全部读取
      let chunks = Math.ceil(fileObj.size / chunkSize);
      let currentChunk = 0;
      fileReader.onload = function(e) {
        currentChunk++;
        if (currentChunk < chunks) {
          loadNext();
        } else {
          that.video.fileMD5 = SparkMD5.ArrayBuffer.hash(e.target.result);
        }
      };
      fileReader.onerror = function() {
        this.$openMessage("检测文件MD5值失败，请重新上传!", "error");
      };
      function loadNext() {
        let start = currentChunk * chunkSize;
        let end =
          start + chunkSize >= fileObj.size ? fileObj.size : start + chunkSize;
        // 注意这里的 fileObj
        fileReader.readAsArrayBuffer(blobSlice.call(fileObj, start, end));
      }
      loadNext();
    },

至此，文件上传速率可以获得，当然这是组件默认的上传方法，也可以使用自定义上传钩子函数http-request，这时候上传中的钩子函数就是失效了，需要使用new XMLHttpRequest()HTTP对象方法，这个对象包含了所有上传中onprogress、上传开始onloadstart、上传失败、成功等方法，具体可以百度查查。

大文件上传的步骤

首先，把大文件给分成多个部分，利用Blob.prototype.slice方法拷贝原来的文件数据，返回一个片段Blob对象，该方法有三个参数start、end、contentType，依次是起始字节位置，结束位置和新实例的数据类型；

其次，把大文件分为多个切片后，可以利用http的可并发性，同时上传多个切片，大大减少上传时间，并记录每个切片顺序，利用XMLHttpRequest构造函数封装接口函数上传文件

显示上传进度，利用XMLHttpRequest.upload.onprogress事件监听函数获得每个切片上传的进度，将每个切片已上传的部分累加，除以整个文件的大小，就能得出当前文件的上传进度

显示上传速度，记录两个时间点start、end(在progress事件监听里添加)，已上传的累积和/(end-start)得到速率

文件秒传，即在服务端已经存在上传的资源，所以当用户再次上传时会直接提示上传成功，是利用一个库spark-md5，根据文件内容计算出文件的hash值或者是使用文件名+切片下标未做切片hash，服务端根据hash的唯一性找到相同hash的文件，直接返回上传成功的信息

暂停上传，利用XMLHttpRequest.abort()方法，取消一个请求的发送，将每个切片的xhr对象保存起来