记录使用element-ui上传组件,通过自定义请求上传文件需要注意的地方。

<el-upload
ref="uploadMutiple"
:auto-upload="false"
action="Fake Action"
:on-success="allHandleSuccess"
:on-change="handleChange"
:file-list="fileList"
:http-request="allUpload"
:before-upload="before_upload"
multiple
>选取文件</el-upload> <el-button type="primary" size="small" @click="submitUpload">上传</el-button>

首先关闭自动上传,并给随便给action赋值一个字符串。(action是必填属性)

       :auto-upload="false"
action="Fake Action"

通过:on-change钩子函数,拿到文件列表:

    handleChange(file, fileList) {
this.fileList = fileList;
},

一般情况下,我们在submitUpload()的点击事件中去触发上传:

submitUpload() {
this.$refs.uploadMutiple.submit();
}

之后组件会触发:http-request钩子行数。需要注意的是,这里你的fileList中有几个文件,就会执行几次:http-request钩子函数。这意味着,如果你把上传请求写在:http-request钩子函数中,就会造成重复不必要的请求。直接在submitUpload()中写post请求即可。只需要把文件封装为formData对象,作为参数传给后台即可。

      let formData = new FormData();
this.fileList.forEach(item => {
formData.append("files", item.raw);
}); this.axios.post(api, formData);

下面是后台接口的写法:

public JSONResponse archiveBatchImport(@RequestParam("files") MultipartFile[] files){}

element-ui上传组件,通过自定义请求上传文件的更多相关文章

  1. vue问题三:element ui的upload组件上传图片成功和移除事件

    element ui的upload组件上传图片成功和移除事件: 登录后获取到后台传的token存到中: sessionStorage.setItem("token",data.ob ...

  2. 关于Element UI中select组件中遇到的问题

    问题一:在使用select组件设置多选功能后,窗口抖动问题? 详细描述:在我使用select做多选的功能时出现了窗口抖动的问题,测试的时候发现,在有些人的电脑上抖动,有些人的电脑上不抖,找了很多文档, ...

  3. vue+element ui中select组件选择失效问题原因与解决方法

    codejing 2020-07-10 09:13:31  652  收藏 分类专栏: Web Vue Element UI 版权 .当表单form赋完值后,如果后续又对form中某一属性值进行操作如 ...

  4. maven工程 java 实现文件上传 SSM ajax异步请求上传

    java ssm框架实现文件上传 实现:单文件上传.多文件上传(单选和多选),并且用 ajax 异步刷新,在当前界面显示上传的文件 首先springmvc的配置文件要配置上传文件解析器: <!- ...

  5. Element UI系列:Upload图片自定义上传

    HTML部分代码 Javascript部分代码 CSS代码 样式部分可以自由调整 主要实现的原理是利用 http-request 的属性对上传进行自定义

  6. element ui 弹出组件的遮罩层在弹出层的上面的解决方法

    <el-dialog title="收货地址" :visible.sync="dialogFormVisible" :modal-append-to-bo ...

  7. 单独调用kindeditor的多图上传组件实现多图上传

    本例是单独调用kindeditor多图上传的组件来进行多图上传,兼容性你懂得! 官方示例地址:http://kindeditor.net/ke4/examples/multi-image-dialog ...

  8. Vue+element UI实现分页组件

    介绍 这是一个是基于element-UI的分页组件基础上,进行了二次封装的分页组件,在展示数据时,该分页组件采用了每显示一页数据,只请求当前页面的数据的请求策略,从而避免了一次性将数据全部请求所造成的 ...

  9. element ui 下拉框绑定对象并且change传多个参数

    废话不说直接上代码说明真相. <template> <div class="hello"> <span>可以设置的属性 value-key=&q ...

随机推荐

  1. 数据库SQL语言从入门到精通--Part 3--SQL语言基础知识

    数据库从入门到精通合集(超详细,学习数据库必看) 一.关系 单一的数据结构----关系 现实世界的实体以及实体间的各种联系均用关系来表示 逻辑结构----二维表 从用户角度,关系模型中数据的逻辑结构是 ...

  2. 2019 ICPC 银川网络赛 F-Moving On (卡Cache)

    Firdaws and Fatinah are living in a country with nn cities, numbered from 11 to nn. Each city has a ...

  3. CentOS启用iptables防火墙

    centos 7默认的防火墙使用firewall,系统服务管理方式也变更了,可以通过systemctl命令控制. 可以参考这个链接 但是习惯用iptables,可以按下面的操作改下 1.关闭firew ...

  4. python call java jar

    python脚本如何调用Java的jar文件呢? HelloWorld.java public class HelloWorld { public static void main(String[] ...

  5. 2020年python开发微信小程序,公众号,手机购物商城APP

    2020年最新的技术全栈,手机短信注册登陆等运用, 精准定位用户 支付宝支付 以及前后端从0到大神的全部精解 2020年最新的技术全栈,手机短信注册登陆等运用, 精准定位用户 支付宝支付 以及前后端从 ...

  6. SAP登录消息提醒

      1功能说明 在相应用户登录时,给其提示相关信息. 2功能实现 2.1函数实现 在函数NAVIGATION_SET_START_TCODE中注册要监听的用户和程序的事务代码,当用户登录时,将自动运行 ...

  7. input在IOS中的聚焦问题

    关于input输入框在iPhone手机中的聚焦问题,开发中是会经常遇到的,在一般的浏览器中,我们一般是通过 document.getElementById('opop').focus(); 来获取焦点 ...

  8. python 基础知识1

    一.编译型与解释性区别: 编译型:一次性将全部的代码编译成二进制文件.(如:C.C++) 优点:运行效率高 缺点:开发速度慢,不能跨平台. 解释型:当程序运行时,从上至下一行一行的解释成二进制.(如p ...

  9. python --error整理(不定时更新)

    1.TabError: inconsistent use of tabs and spaces in indentation Python 中需要用tab 键来空格 2.SyntaxError: in ...

  10. 工作总结1-----String.format的使用

    以前在开发项目中,输入信息常使用的方法:"XXXXXXX"+a+"XXXXXXXXXXX"+b;,这种方式不仅不美观而且不易维护! String中的format ...