springboot+element-ui多文件一次上传

news2024/9/24 21:20:34

 

前端:

                <el-upload
                    drag
                    :multiple="true"
                    :limit="10"
                    :auto-upload="false"
                    :file-list="fileList"
                    ref="fileUpload"
                >
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">
                        将文件拖到此处,或<em>点击上传</em>
                    </div>
                    <div class="el-upload__tip" slot="tip">
                        只能上传{{ fileExt }}文件,且不超过{{ getFileSize() }}
                    </div>
                </el-upload>

定义上传方法:

        submitFile() {
            const formData = new FormData();
            formData.append("bizType", this.bizType);

            /**
             * 所有选择的文件,放到FormData对象中上传
             * fileName[] 属性名根据自身情况定义
             */
            this.fileList.map(file => {
                formData.append("file", file.raw);
            });
            this.$http.post("/mom/sopFile/upload", formData)
              .then(res => {
                 if (res && res.isSuccess) {
                    console.log("上传成功");
                  } else {
                     console.log(res.msg);
                  }
            });
        },

Java上传:

    @PostMapping(value = "/upload", headers = "content-type=multipart/form-data")
    @SysLog("上传附件")
    @ResponseBody
    public R<Boolean> upload(@RequestParam(value = "file") List<MultipartFile> files,
                             @Validated SopFileUploadVO fileUploadVO) {
        // 忽略路径字段,只处理文件类型
        if (files.size() < 1) {
            return R.fail("请上传有效文件");
        }
        for (MultipartFile file : files) {
            //在这里编写上传代码
        }
        return R.success(true);
    }

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/696597.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【云原生】Pause 容器介绍

Pause 容器 Pause 容器&#xff0c;又叫 Infra 容器 我们知道在 kubelet 的配置中有这样一个参数&#xff1a; KUBELET_POD_INFRA_CONTAINER--pod-infra-container-imageregistry.access.redhat.com/rhel7/pod-infrastructure:latest上面是 openshift 中的配置参数&#xff…

关于Java类加问题我竟让面试官哑口无言

学习类加载之前我们先看看从面试官的角度会问哪些问题&#xff1f;毕竟带着问题学习会比较高效。 直击面试 看你简历写得熟悉 JVM&#xff0c;那你说说类的加载过程吧&#xff1f; 我们可以自定义一个 String 类来使用吗&#xff1f; 什么是类加载器&#xff0c;类加载器有哪些…

雨水情自动监测报警系统解决方案

随着夏季雨季的到来&#xff0c;对全国各地的防汛工作形成挑战&#xff0c;为了实现有效的雨水管理和应对极端天气情况&#xff0c;建立一套科学高效的雨水情监测系统有着重要作用。雨水情监测系统能够提供及时准确的雨水信息&#xff0c;帮助决策者进行全面的天气分析和预警&a…

数字化转型排头兵,金融行业如何利用科技赋能业务 | TVP金融交流会

引言 金融行业&#xff0c;是数字化转型浪潮中的排头兵。这个上千年来&#xff0c;不断创新的行业&#xff0c;从以物易物到纸币发行再到数字资产&#xff0c;承袭至今的是保障客户资产安全&#xff0c;提升资产流通效率的本心。进入产业互联网时代以后&#xff0c;金融科技的发…

第5讲:使用ajax技术实现局部刷新功能(xml数据)

使用ajax技术实现局部刷新功能&#xff0c;每2秒刷新一次数据&#xff0c;本案例使用原生态xmlhttprequest对象&#xff0c;GET方法通讯&#xff0c;使用responseXML属性返回xml格式数据&#xff0c;同时刷新界面数据。 ajax封装库(ajax.js) var xmlhttpnull; //创建XMLHttpRe…

adb-学会查看日志文件

目录 一、获取日志文件 二、日志级别 三、日志缓冲区 四、缓冲区的类型 &#x1f381;更多干货 完整版文档下载方式&#xff1a; 一、获取日志文件 一般情况下&#xff0c;我们在做app测试时&#xff0c;其实并不需要经常使用adb去抓取我们的日志&#xff0c;通常情况下…

使用GPIO来模拟UART

前言 最近在看一些秋招的笔试和面试题&#xff0c;刚好看到一个老哥的经验贴&#xff0c;他面试的时候被问到了如果芯片串口资源不够了该怎么办&#xff1f;其实可以用IO口来模拟串口&#xff0c;但我之前也没有具体用代码实现过&#xff0c;借此机会用32开发板上的两个IO口来…

力扣 404. 左叶子之和

题目来源&#xff1a;https://leetcode.cn/problems/sum-of-left-leaves/description/ C题解1&#xff1a;递归法&#xff0c;前序遍历。 1. 确定输入参数&#xff1a;当前节点&#xff0c;左叶子的和&#xff1b; 2. 确定终止条件&#xff1a;空节点时返回&#xff1b; 3. …

【每日一短语】在必要情况下

1、短语及释义 in a pinch 释义&#xff1a; 在紧要关头&#xff1b;在必要情况下 2、示例及出处 美剧&#xff1a;《生活大爆炸》第七季第21集 The Big Bang Theory, Season 7 Episode 21 Sheldon Cooper: Penny, there’s only one cookie with something in the middle tha…

基于STM32设计的城市绿化云端监控系统(华为云IOT)

一、设计需求 1.1 项目背景 随着科技的蓬勃发展改变了很多传统行业的作业方式,当我们用移动支付代替现金交易时,当我们足不出户就能满足饥饿的身体时,我们的生活方式因为科技而发生了改变;同样科技也在改变着我们周围的点点滴滴,城市绿化养护亦是如此。 通过智慧控制系统…

在Docker中使用MindSpore GPU版本

文章目录 在Docker中使用MindSpore GPU版本获取安装命令安装安装nvidia-container-toolkit获取MindSpore镜像测试运行MindSpore镜像运行代码 使用VSCode开发 在Docker中使用MindSpore GPU版本 参考官方文档&#xff1a;安装指南 获取安装命令 如图所示 命令为 docker pull…

MFC将二维数组写入文件中并进行读取

MFC将二维数组写入文件中并进行读取 当前项目需要将二维数组写入到本地文件中&#xff0c;并在另一个对话框中进行读取。网上查了很多资料&#xff0c;基本都是写字符串到文件中的&#xff0c;想依葫芦画瓢仿照字符串的写法来写二维数组&#xff0c;发现在写文件状态下&#x…

护网是什么?为什么【网安人】都想参加!

一、什么是护网行动&#xff1f; 护网行动是以公安部牵头的&#xff0c;用以评估企事业单位的网络安全的活动。 具体实践中。公安部会组织攻防两方&#xff0c;进攻方会在一个月内对防守方发动网络攻击&#xff0c;检测出防守方&#xff08;企事业单位&#xff09;存在的安全漏…

Flink之FileSink将数据写入parquet文件

Flink之FileSink将数据写入parquet文件 在使用FileSink将数据写入列式存储文件中时必须使用forBulkFormat,列式存储文件如ORCFile、ParquetFile,这里就以ParquetFile为例结合代码进行说明. 在Flink1.15.3中是通过构造ParquetWriterFactory然后调用forBulkFormat方法将构造好的…

第9章 异常处理

第9章 异常处理 9.1 Java异常处理 try-catch-finally ​ ​ 9.2 Scala异常处理 ​ ​ package chapter09object Test01_Exception {def main(args: Array[String]): Unit {try {val n 10 / 1} catch {case e: ArithmeticException > {println("发生算数异常&quo…

【Java高级编程】Java常用类

Java常用类 1、字符串相关的类1.1、字符串相关的类&#xff1a;String1.2、字符串相关的类&#xff1a;String常用方法1.3、String与基本数据类型、包装类之间的转换1.4、String与char[]之间的转换1.5、String与byte[]之间的转换1.6、String、StringBuffer、StringBuilder三者的…

element-plus中的el-table如何动态合并行(复制粘贴即可使用 亲测有效!)

demo场景&#xff1a; 一个 table&#xff0c;由5列组成&#xff0c;其 prop 分别为’resource_name’, ‘scene_name’, ‘type’, ‘content’, ‘desc’&#xff0c;渲染 table 的数据来源于接口。现在需要将 propdesc的这一列&#xff0c;按照resource_name 相等时进行合并…

使用EVPN构建二层VPN

一、业务背景 EVPN实例用于将EVPN路由与公网路由隔离。不同EVPN实例的路由之间也是相互隔离的。在所有EVPN组网方案中,都需要配置EVPN实例。 二、业务拓扑 三、配置步骤 1、配置基本接口IP 2、配置核心网IGP和LDP 3、配置PE和PE之间的BGP EVPN邻居关系 4、配置EVPN的源地址 …

Linux5.10 NoSQL 之 Redis配置与优化及数据类型

文章目录 计算机系统5G云计算第四章 LINUX NOSQL 之 Redis配置与优化及数据类型一、关系数据库与非关系型数据库1.关系型数据库2.非关系型数据库3.关系型数据库和非关系型数据库区别4.非关系型数据库产生背景5.总结 二、Redis简介1.Redis 具有以下几个优点2.使用场景3.哪些数据…

一、枚举类型——使用 EnumMap 分发

使用 EnumMap 可以实现“真正的”双路分发&#xff0c;它是专门为 enum 设计的高效 Map。我们的目标是在两个未知类型中切换&#xff0c;因此由 EnumMap 组成的 EnumMap &#xff08;嵌套 EnumMap &#xff09;可以实现双路分发。 RoShamBo5.java import java.util.EnumMap;imp…