vue下载文件进度问题

download(url, title) {
      console.log(title)
      const self = this
      self.loading = true
      const x = new XMLHttpRequest()
      x.open('GET', url, true)
      x.responseType = 'blob'
      x.onload = function () {
        const herf = window.URL.createObjectURL(x.response)
        const a = document.createElement('a')
        a.href = herf
        a.download = title
        a.click()
        if (navigator.msSaveBlob) {
          navigator.msSaveBlob(x.response, title)
        }
      }
      // todo: 添加下载进度
      x.onprogress = function(event) {
        // 只有 e.lengthComputable 为真，才会有进度条的信息
        if (event.lengthComputable) {
          var percentComplete = event.loaded / event.total
          var progress = parseInt(percentComplete * 100)
          self.shipvalue = progress++
        }
      }
      x.onreadystatechange = function() {
        if (x.readyState === 4) { // 4 = "loaded"
          if (x.status === 200) { // 200 = "OK"
            setTimeout(() => {
              self.loading = false
            }, 800)
          } else {
            alert('Problem retrieving data:' + x.statusText)
          }
        }
      }
      x.send()
    },