原生ajax实现上传进度条、上传大小、剩余时间

完整代码如下

<template>
  <div>
    <progress id="progressBar" value="0" max="100" style="width: 300px;"></progress>
    <span>{{percentage}}</span><span>{{time}}</span>
    <input type="file" id="file" name="myfile" />
    <input type="button" onclick="UpladFile" value="上传" />
    <input type="button" onclick="cancleUploadFile" value="取消" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      xhr: null,
      ot: '',
      oloaded: '',
      time: '',
      percentage: ''
    }
  },
  methods: {
    UpladFile() {
      var file = document.getElementsByTagName('input')[0].files[0]  // js 获取文件对象
      var url = ""  // 接收上传文件的后台地址 
      var fd = new FormData()  // FormData 对象
      fd.append("file", file)  // 文件对象
      this.xhr = new XMLHttpRequest()
      this.xhr.open('post', url, true)
      this.xhr.onreadystatechange = function() {
        if(this.readyState == 4){
          console.log('上传成功')
        }
      }
      this.xhr.onload = this.uploadComplete(evt) //请求完成
      this.xhr.onerror = this.uploadFailed(evt) //请求失败
      this.xhr.upload.onprogress = this.progressFunction(evt) // 上传进度
      const that = this
      this.xhr.upload.onloadstart = function(){ // 上传开始执行方法
          that.ot = new Date().getTime() //设置上传开始时间
          that.oloaded = 0 // 设置上传开始时，以上传的文件大小为0
      };
      
      this.xhr.send(fd)
    },
    // 上传进度实现方法，上传过程中会频繁调用该方法
    progressFunction(evt) {
      var progressBar = document.getElementById("progressBar");
      // event.total是需要传输的总字节，event.loaded是已经传输的字节。如果event.lengthComputable不为真，则event.total等于0
      if (evt.lengthComputable) {
        progressBar.max = evt.total;
        progressBar.value = evt.loaded;
        this.percentage = Math.round(evt.loaded / evt.total * 100) + "%";
      }
        
      var time = document.getElementById("time");
      var nt = new Date().getTime() // 获取当前时间
      var pertime = (nt-ot)/1000 // 计算出上次调用该方法时到现在的时间差，单位为s
      this.ot = new Date().getTime() // 重新赋值时间，用于下次计算
      
      var perload = evt.loaded - this.oloaded // 计算该分段上传的文件大小，单位b       
      this.oloaded = evt.loaded // 重新赋值已上传文件大小，用以下次计算
  
      //上传速度计算
      var speed = perload/pertime // 单位b/s
      var bspeed = speed
      var units = 'b/s' // 单位名称
      if(speed/1024>1){
          speed = speed/1024
          units = 'k/s'
      }
      if(speed/1024>1){
          speed = speed/1024
          units = 'M/s'
      }
      speed = speed.toFixed(1)
      //剩余时间
      var resttime = ((evt.total-evt.loaded) / bspeed).toFixed(1)
      this.time = '，速度：'+speed+units+'，剩余时间：'+resttime+'s'
      if(bspeed==0) {
        this.time = '上传已取消'
      }
    },
    // 上传成功响应
    uploadComplete(evt) {
      // 服务断接收完文件返回的结果
      alert("上传成功！");
    },
    // 上传失败
    uploadFailed(evt) {
      alert("上传失败！");
    },
    // 取消上传
    cancleUploadFile(){
      this.xhr.abort();
    }
  }
}
</script>