首页 > 其他分享 >elementui el-upload实现不自动上传,将上传内容放在formData里面,传递给后端

elementui el-upload实现不自动上传,将上传内容放在formData里面,传递给后端

时间:2023-11-16 10:47:52浏览次数:19  
标签:el loading elementui formData message 上传 append

 //这种情况一般是要弹出一个弹框进行上传操作


         <el-upload ref="upload" action="" name="fileList" :show-file-list="false" :auto-upload="false" :multiple="true" :headers="header" :on-change="onSuccess" :on-error="onError" > <el-button slot="trigger" size="small" type="primary">选取文件</el-button> </el-upload>
methods:{
    onSuccess(response) {
        this.filesList.push(response);
    },

  onError(err) {       var errData = JSON.parse(err.message);       this.$notify({         title: "警告",         message: errData.message,         type: "warning",       });     },
  // 弹框确定按钮
    handlerOk(){
        let formData = new FormData();
     formData.append('newAgent', this.addParams.newAgent); formData.append('hostsList', this.addParams.hostsList); //将上传列表循环添加到表单里面 this.filesList.forEach(ele=>{ formData.append('filesList', ele.raw); }) const loading = this.$loading({ lock: true, text: 'Loading', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)' }); this.$axios .post("/api/...........", formData) .then((res) => { if (res.data.code == 200) { this.$message.success("操作成功"); loading.close(); } }); }, }

 

标签:el,loading,elementui,formData,message,上传,append
From: https://www.cnblogs.com/web-aqin/p/17835650.html

相关文章

  • Python读取pdf、word、excel、ppt、csv和txt文件提取所有文本
    前言本文对使用python读取pdf、word、excel、ppt、csv、txt等常用文件,并提取所有文本的方法进行分享和使用总结。可以读取不同文件的库和方法当然不止下面分享的这些,本文的代码主要目标都是:方便提取文件中所有文本的实现方式。这些库的更多使用方法,请到官方文档中查阅。读取PD......
  • 做数据分析,我们需要懂多少excel知识?
    数据分析所需的Excel知识详解在进行数据分析工作时,Excel是一个非常常用且强大的数据处理工具。以下是数据分析中常用的Excel知识点和技巧的详细描述。1.基本操作在使用Excel进行数据分析之前,首先需要掌握Excel的基本操作,包括单元格的选择、复制粘贴、插入行列、删除等。这些......
  • 【ElasticSearch】突破深度分页数据限制的方案
    一、场景需求最近在忙一个新的项目,数据源是ES,但是功能就是对文档进行翻页查询ES提供了分页查询,就是from+size深度查找,但是使用有限制,只能在1万条内 我和同事的意见是1万条之后的数据没有任何意义,就限制1万吧但是后面内部测试后产品对这个方案是不满意的,既要又要所以ES现......
  • springboot大文件上传、分片上传、断点续传、秒传的实现
    本篇攻略将详细介绍如何使用SpringBoot实现大文件上传、分片上传、断点续传和秒传功能。为方便阅读,本文将分为以下几个部分:介绍大文件上传、分片上传、断点续传和秒传的概念详细分析如何实现大文件上传、分片上传、断点续传和秒传功能给出两个示例来说明如何实现大文件上传和......
  • 打造基于Excel表格数据驱动系统
    策划喜欢用Excel,里面有很多计算公式,非常方便,策划写好的数据,程序手写到代码里面,每次修改比较麻烦,所以我们做一个模块,能自动将Excel数据转成程序能直接使用的数据。每次更改数据后,程序很快就能使用起来。1:定义一个Excel的格式让策划和程序沟通    程序要解析Excel,......
  • 1)属性先查自身,没有再查构造函数的原型。2)在全局下声明的变量,有var声明的不可以被delet
    以下代码执行后,a.x和b.x的结果分别为()functionA(x){this.x=x;}A.prototype.x=1;functionB(x){this.x=x;}B.prototype=newA();vara=newA(2),b=newB(3);deleteb.x;A2,3B2,1C2,undefinedD其他几项都不对正确答案:C对象a自身具有......
  • selinux的上下文
    一:了解selinux的信息selinux和防火墙和文件和目录的权限三种限制要开启一个服务,这三个东西都要调试一下,才能正确的使用这个服务selinux的介绍:他是一个安全访问策略,用来确定进程可以访问哪些文件,服务对应的文件或者目录,服务对应的端口,服务对应的进程这三种列子:服务的实列(就......
  • 十三:文件操作类&编辑器&上传下载删除读写
    文件获取操作:1functiongetfilename()2{3$dir=getcwd();4$file=scandir($dir);5foreach($fileas$value)6{7if($value!='.'&&$value!='..')8{9$arr[]=$value;1......
  • NS-3源码学习(二)Channel和NetDevice
    NS-3源码学习(二)Channel和NetDevice对于一个新的802.11协议的实现,仅需要完成对两个抽象类的实现即可,一个是Channel抽象类,一个是NetDevice接口,这两个类对上层来说是透明的,而且据我查阅代码了解,这两个类仅需知道上一层(网络层)是IPv4协议还是IPv6协议即可,并没有对上层有更高的要求。M......
  • vue中el-upload结合vuedraggable实现图片的上传、排序、删除以及预览等功能_element u
    <template><div><ulclass="el-upload-listel-upload-list--picture-card"style="display:flex;"><div><!--start:拖拽开始end:拖拽结束imageLists:需要展示图片的数组-->......