记录使用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. Windows 10配置VS Code C++环境(超详细,面向小白以及大佬们)

    看完这个,还有下一篇:门在这 我看了网上的大佬们配的我是在是看不懂啊?我是一个小白啊?这太难了,这阻挡不了我,想使用这很骚的IDE,于是在不断的摸索下,终于配置成功,小白们也不用慌,这次非常简单.一定 ...

  3. Codeforce 1251C. Minimize The Integer

    C. Minimize The Integer time limit per test2 seconds memory limit per test256 megabytes inputstandar ...

  4. codeforce 270B Multithreading

    B. Multithreading Emuskald is addicted to Codeforces, and keeps refreshing the main page not to miss ...

  5. 线性回归 - LinearRegression - 预测糖尿病 - 量化预测的质量

    线性回归是分析一个变量与另外一个或多个变量(自变量)之间,关系强度的方法. 线性回归的标志,如名称所暗示的那样,即自变量与结果变量之间的关系是线性的,也就是说变量关系可以连城一条直线. 模型评估:量化 ...

  6. Spring AOP概述

    一.AOP的基本概念: 首先先给出一段比较专业的术语: 在软件业,AOP为Aspect Oriented Programming的缩写,意为:面向切面编程,通过预编译方式和运行期动态代理实现程序功能的 ...

  7. golang教程汇总

    A Tour of Go Go编程基础 Go 语言圣经 中文版

  8. CtsSecurityTestCases#ListeningPortsTest定位tcp端口与pid

    CtsSecurityTestCases#ListeningPortsTest定位tcp端口与pid [问题描述] cts失败项 armeabi-v7a CtsSecurityTestCases an ...

  9. Navicat,SQL注入,pymysql模块

    # 关键字exists(了解) 只返回布尔值 True False 返回True的时候外层查询语句执行 返回False的时候外层查询语句不再执行 select * from emp where exi ...

  10. nginx代理路径配置总结

    一.发现问题 配置nginx代理的时候,发现location配置的路径和代理的上下文路径的组合不同,服务端接收到的uri的路径不同,导致了controller的RequestMapping匹配出现问题 ...