vue通過input選取apk文件上傳，顯示進度條

<template>
  <div class="">
    <form action="" method="post" class="upload" ref="upload">
      <button class="sign" id="uploadFile">選擇文件</button>
      <input 
          type="file" 
          accept=".ipa,.apk" 
          name="upload" 
          id="file"
          @change="fileSelect($event)"/>
    </form>
    <button type="button" class="btn" id="upfile" @click="submit" v-if="!isSave">
  </div>
</template>
<script>
export default {
    name: "",
    components:{
    },
    data(){
      return{
         percent:0
      }
    },
    created:function(){},
    methods:{
      //選擇文件
      fileSelect(e) {
        this.files = e.target.files[0];
        if(this.files){
          this.getMsg();
        }
      },
     //解析安裝包
      getMsg() {
        const parser = new AppInfoParser(this.files).parse().then(result => {
          let fileName = this.files.name;
          let suffix = fileName.substring(fileName.lastIndexOf(".") + 1,fileName.length);
          if (result) {
            this.icon = result.icon;
            if (suffix == 'ipa') {
              if (result.CFBundleDisplayName == undefined) {
                this.appname = result.CFBundleName;
              } else {
                this.appname = result.CFBundleDisplayName;
              }
              this.apppackage = result.CFBundleIdentifier;
              this.appTeamName = result.mobileProvision.TeamName;
              this.appversion = result.CFBundleShortVersionString
      
              var str = result.mobileProvision.ProvisionsAllDevices;
              var test_v = result.mobileProvision.ProvisionedDevices;
              if (str) {
                this.apptype = "企業版";
              } else {
                if (result.mobileProvision.DeveloperCertificates.length >= 0) {
                  this.apptype = '測試版本';
                } else {
                  this.apptype = "未簽名應用" ;
                }
              }
              this.isShow = true;
              return;
            }
            if (suffix == 'apk') {
              this.appname = result.application.label[0];
              this.apppackage = result.package;
              this.appversion = result.versionCode;
            }
            this.isShow = true;
          }
        })
      },
      // 上傳apk文件
      submit(){
            let that = this
            // 獲取表單對象上傳apk文件
            var fm = this.$refs.upload;
            // 實例化FormData對象
            var fd = new FormData();
            //添加上傳的文件以及token參數
            fd.append('token',this.token)
            fd.append('file',document.querySelector('input[type=file]').files[0])
            // 創建XMLHttpRequest對象
            var xhr = new XMLHttpRequest();
            // 調用open方法准備ajax請求
            xhr.open('post','http://xx.xxxx.cn/api/user/upload/xxx');
            var jdt = this.$refs.progressbar;
            // 綁定onprogress事件可獲取上傳的進度
            xhr.upload.onprogress = function(evt){
                let percent = (evt.loaded / evt.total).toFixed(2);
                that.percent = parseInt(percent*100)
                console.log(that.percent)
            }
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){
                  let data = JSON.parse(xhr.responseText)      //轉化為對象便於操作
                  console.log(data)
                }
            }
            // 發送ajax請求
            xhr.send(fd);
      },
    },
    mounted:function(){} 
}
</script>
<style scoped>

</style>