首页 > 其他分享 >elementui el-upload 实现不自动上传功能,点击确定在上传,并且显示上传进度条功能

elementui el-upload 实现不自动上传功能,点击确定在上传,并且显示上传进度条功能

时间:2023-12-05 16:45:11浏览次数:31  
标签:newAgent el addParams elementui upload hostsList message 上传

 

 

 

<div>
    <div class="row mt-2">
      <div class="col-lg-12">
        <label>agent文件名</label>
        <input
          v-model="addParams.newAgent"
          type="text"
          class="form-control"
          placeholder="如果直接上传文件则不需要填写文件名称"
        />
      </div>

      <div class="col-lg-12">
        <label>上传jar包</label>
        <el-upload
          ref="upload"
          name="filesList"
          action="/api/master/press/upgrade"
          :auto-upload="false"
          :file-list="filesList"
          :multiple="true"
          :data="addParams"
          :headers="header"
          :on-success="onSuccess"
          :on-error="onError"
        >
          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
        </el-upload>
      </div>
    </div>

    <div class="row mt-2">
      <div class="col-lg-12">
        <b-button block variant="success" @click="uploadSubmit">确 认</b-button>
      </div>
    </div>
  </div>
uploadSubmit() {
      this.submitted = true;
      // this.$v.$touch();
      if (this.$refs.upload.uploadFiles.length < 1) {
        this.$message.warning("请选择文件");
        return false;
      }

      // let formData = new FormData();
      // formData.append("newAgent", this.addParams.newAgent);
      // console.log("newAgent:", this.addParams.newAgent);
      // formData.append("hostsList", this.addParams.hostsList);
      // console.log("hostsList:", this.addParams.hostsList);

      this.$refs.upload.submit();
    },

    onSuccess(response) {
      this.filesList.push(response);
      this.props.upgradeDialog = false;
    },

    one rror(err) {
      this.showProgress = false;
      var errData = JSON.parse(err.message);
      this.$notify({
        title: "警告",
        message: errData.message,
        type: "warning",
      });
    },

 

标签:newAgent,el,addParams,elementui,upload,hostsList,message,上传
From: https://www.cnblogs.com/web-aqin/p/17877605.html

相关文章

  • el-table实现滚动效果
    实现步骤:1、方法methods:{scroll(){letel=document.querySelector('.el-table__body-wrapper')el.addClassName='anim'setTimeout(()=>{//console.log(this.items[0])this.tableData.p......
  • SpringBoot实现文件上传下载
    配置在application.yml中添加配置spring:servlet:multipart:enabled:true#表示是否开启文件上传支持,默认为truefile-size-threshold:0#表示文件写入磁盘的阀值,默认为0location:#表示上传文件的临时保存位置max-file-size:1MB#表示上......
  • perl:mysql binlog iud (insert、update、delete)分析 小脚本:实用程序
    1#!/usr/bin/perl2#utf-834usestrict;5usePOSIX;6useTime::HiResqw/sleeptime/;78$|=1;910my$line='#-----------------------------------------------------------------------';11my$debug=0;1213##------------......
  • Prometheus Dashboard for elasticsearch exporter
    prometheus-community/elasticsearch_exporter:ElasticsearchstatsexporterforPrometheusReleases·prometheus-community/elasticsearch_exporterDashboards|GrafanaLabsElasticsearchExporterQuickstartandDashboard|GrafanaLabsPrometheusOSS|Elast......
  • PostgreSQL: select for update实战
    场景需要获取用户申请的流水号,其值记录在number_of_form表中。但当多个用户同时申请时,会出现单号重复的情况,现在需要保证单据号码的一致性解决方案以我搜寻来看,大体有两种做法。悲观锁:总是假设最坏的情况,也就是每次拿数据的时候,都认为别人会修改,所以每次拿数据,都会对符合条......
  • 使用SpringBoot实现文件上传和下载
    上传文件:1.在`pom.xml`文件中添加依赖:xml<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>org.springframework.boot<......
  • Excel判断日期是否是工作日的实现(排除节假日,加上补班日)
     实现思路:工作日= 【周一到周五(排除节假日)或者补班日】公式编写:1.周一到周五判断WEEKDAY(A2,2) 获取该日期是星期几(返回:1-7),那么周一到周五就是<62.非节假日判断COUNTIF($G$2:$G$398,A2)=0统计该日期在指定区域$G$2:$G$398中出现的次数,非节假日就是未出现,出现......
  • IntelliJ IDEA 2023.2新特性详解第三弹!Docker、Kubernetes等支持!
    9Docker在Docker镜像层内预览文件现在可以在Services(服务)工具窗口中轻松访问和预览Docker镜像层的内容。从列表选择镜像,选择Showlayers(显示层),然后点击Analyzeimageformoreinformation(分析镜像以获得更多信息)。这将打开层中存储的文件列表,你可以右键点击文件,然后......
  • IntelliJ IDEA 2023 又出新版本啦!最新IDEA激活码安排上「永久激活,长期更新,亲测有效」
    IntelliJIDEA2023又出新版本啦IntelliJIDEA2023又出新版本啦!上一个版本还没用熟练,2023.2.5版本就出来了。还好是小版本发布,使用上没有太多影响。IntelliJIDEA是一款功能强大的集成开发环境,被广泛应用于Java开发中。为了充分发挥其优势,您需要激活码来解锁全部功能。本文将......
  • 三-select模型
    select模型是对简单C/S模型的优化,他解决了accept函数阻塞等待连接的问题。并且允许应用程序同时监视多个套接字,从而实现简单的并发请求。通过调用select函数确认一个或多个套接字当前的状态,并根据当前状态进行相应操作。在select模型模型中,select函数是最关键的。select模型工作......