zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    MySQL data type
    Backup &recovery备份和还原
    Spring AOP capabilities and goals
    CDI Features
    人力资源管理系统测试功能(最后阶段)
    部分代码片段—人力资源管理系统(第二阶段)
    人力资源管理系统需求分析报告及系统架构图
    MySQL:Download Connector/Python
    The History of spring
    认识LDAP协议
  • 原文地址:https://www.cnblogs.com/wd163/p/13169051.html
Copyright © 2011-2022 走看看