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>