vue获取上传进度_vue通过input选取apk文件上传，显示进度条

选择文件

type="file"accept=".ipa,.apk"name="upload"id="file"@change="fileSelect($event)"/>

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.CFBundleShortVersionStringvar 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 = newFormData();//添加上传的文件以及token参数

fd.append('token',this.token)

fd.append('file',document.querySelector('input[type=file]').files[0])//创建XMLHttpRequest对象

var xhr = newXMLHttpRequest();//调用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(){}

}