Element-UI 多个el-upload组件自定义上传,不用上传url,并且携带自定义传参(文件序号)

news2024/10/5 15:26:30

1. 需求: 有多个(不确定具体数量)的upload组件,每个都需要单独上传获取文件(JS File类型),不需要action上传到指定url,自定义上传动作和http操作。而且因为不确定组件数量,所以每次也需要获取是第几个文件(索引),所以也需要实现附加索引这个参数

2. 实现:如下

<el-col v-bind="grid2" v-for="(item, index) in list" :key="index"> # list 不知道一共有几个列表项
    <el-form-item required :label="item.value" prop="randomAmount">
        <el-upload
            class="upload-demo"
            action="none" #这里随便写
            :http-request="handleFileUpload" #这里会覆盖原本的上传http的操作,从而实现自定义。
            :limit="1"
            :on-remove="(file, fileList)=> {return onRemove(file, fileList, index)}" #这里的index是自定义索引参数,这种写法能够携带自己的参数
            :on-change="(file, fileList)=> {return onChange(file, fileList, index)}">  
            <el-button round>点击上传</el-button>
        </el-upload>
    </el-form-item>
</el-col>
<el-col :span="24">
    <el-button type="primary" @click="submitForm">确认提交</el-button>
</el-col>


<script>
export default {
	data() {
		return {
            // 暂存个el-upload的File
            fileUploaded: {
                1: null,
                2: null,
                3: null,
                4: null,
                5: null // 可以多写几个(确定最多不会上传超过某数量的文件)
            },
			list:[ // 根据这个列表,渲染相应数量的el-upload组件
				{ key: "1", value: "个体工商户/企业营业执照照片" },
				{ key: "2", value: "政府机关/事业单位/社会组织登记证书照片" },
				// list 不知道一共有几个列表项,这部分是通过后端请求获取的
			]
		}
	},
	methods: {
        // 覆盖默认的http行为
        handleFileUpload(options, index){
        },
        // 文件操作删除
        onRemove(file, fileList, index){
            this.fileUploaded[index] = null
        },
        // 文件上传
        onChange(file, fileList, index) {
            // 判断上传的文件是否是满足格式要求(自定义)
            if(!file.name.includes('.zip')) {
                fileList.pop() # 清除上传文件后展示出来的文件图标
                return this.$message.error("请上传zip压缩包!")
            }
            // 判断上传的文件是否超过大小限制(自定义)
            if (file.size >= 5*1024*1024){ // 5mb
                fileList.pop()
                return this.$message.error("大小不能超过5MB!")
            }
            // 判断上传的文件的状态(一般不会出错)
            if(file.status != 'ready'){
                fileList.pop()
                return this.$message.error("状态错误")
            }
            // 暂存文件
            this.fileUploaded[index] = file.raw
        },
        // 表单上传,先判断文件是否按要求上传了,满足要求的话,构造formData
        submitForm(){
            let formdata = new FormData()
            let formList = []
            for (let i = 0; i < this.list.length; i++) {
            	// 如果有文件未上传,则报错。确保每个el-upload都上传了文件
                if (!this.fileUploaded[i]){
                    return this.$message.error('请上传'+this.list[i].value)
                }
                formList.push(this.fileUploaded[i])
            }
            formdata.append('subMerCertFiles', formList) // formData列表形式
            // 后面调用接口提交订单
            
       	}
    }
}
</script>

演示

在这里插入图片描述
在这里插入图片描述

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

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

相关文章

SpringMVC-.xml的配置

文章目录 一、对pom.xml的配置二、对web.xml1.第一种方式2. 第二种方式 三、对SpringMVC.xml的配置 一、对pom.xml的配置 <!-- 打包成war包--><packaging>war</packaging> <dependencies><!-- SpringMVC--><dependency><gro…

Shiro框架:Shiro用户访问控制鉴权流程-Aop注解方式源码解析

目录 1.Spring Aop嵌入点解析 2.Shiro框架Aop切面逻辑解析 2.1 通过注解实现切点 2.2 通过增强逻辑执行校验过程 2.2.1 增强实现类AopAllianceAnnotationsAuthorizingMethodInterceptor 2.2.1.1 类图解析 2.2.1.2 实现增强方法 2.2.1.3 Shiro校验逻辑实现 2.2.1.3.1 …

代码随想录27期|Python|Day33|贪心算法|1005.K次取反后最大化的数组和|134. 加油站|135. 分发糖果

1005. K 次取反后最大化的数组和 思路比较简单&#xff0c;把所有的负数绝对值大的全部取反之后再在新的数组里把绝对值最小的重复取反即可。 class Solution(object):def largestSumAfterKNegations(self, nums, k):""":type nums: List[int]:type k: int:rt…

VS里那些实用的调试(debug)技巧

前言——————希望现在在努力的各位都能感动以后享受成功的自己&#xff01; 首先我们要来了解什么是bug——————bug本意是“昆虫”或“虫子”&#xff0c;现在⼀般是指在电脑系统或程序中&#xff0c;隐藏着的⼀些未被发现的缺陷或 问题&#xff0c;简称程序漏洞。 “…

Java导出Excel并合并单元格

需求&#xff1a;需要在导出excel时合并指定的单元格 ruoyi excel 项目基于若伊框架二次开发&#xff0c;本着能用现成的就不自己写的原则&#xff0c;先是尝试了Excel注解中needMerge属性 /*** 是否需要纵向合并单元格,应对需求:含有list集合单元格)*/public boolean needMer…

11 - PXC集群|MySQL存储引擎

PXC集群&#xff5c;MySQL存储引擎 数据库系列文章PXC集群配置集群测试集群 MySQL存储引擎存储引擎介绍mysql服务体系结构mysql服务的工作过程处理查询访问的工作过程处理存储insert访问的工作过程 什么是搜索引擎 存储引擎管理查看存储引擎修改存储引擎 存储引擎特点myisam存储…

20240119-子数组最小值之和

题目要求 给定一个整数数组 arr&#xff0c;求 min(b) 的总和&#xff0c;其中 b 的范围涵盖 arr 的每个&#xff08;连续&#xff09;子数组。由于答案可能很大&#xff0c;因此返回答案模数 Example 1: Input: arr [3,1,2,4] Output: 17 Explanation: Subarrays are [3]…

【排序算法】五、冒泡排序(C/C++)

「前言」文章内容是排序算法之冒泡排序的讲解。&#xff08;所有文章已经分类好&#xff0c;放心食用&#xff09; 「归属专栏」排序算法 「主页链接」个人主页 「笔者」枫叶先生(fy) 目录 冒泡排序1.1 原理1.2 代码实现&#xff08;C/C&#xff09;1.3 特性总结 冒泡排序 1.1…

基于Springboot的民宿在线预定平台(有报告)。Javaee项目,springboot项目。

演示视频&#xff1a; 基于Springboot的民宿在线预定平台(有报告)。Javaee项目&#xff0c;springboot项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体系结构&#xff0c;通过Spring…

SAI实例研究

实现目标 接到特定任务后&#xff0c;召唤生物攻击当前角色 例子 creature.id 15402&#xff08;即 smart_script.entryorguid&#xff09;共分为0和1两个事件阶段 第0阶段&#xff1a;第1条(id 0&#xff09;&#xff0c;第2条(id 1&#xff09;&#xff0c;第3条(id 2…

基于YOLOv8的目标识别、计数、电子围栏的项目开发过程

0 前言 用于生产环境中物体检测、识别、跟踪&#xff0c;人、车流量统计&#xff0c;越界安全识别 1 YOLOv8概述 YOLOv8 是Ultralytics的YOLO的最新版本。作为一种前沿、最先进(SOTA)的模型&#xff0c;YOLOv8在之前版本的成功基础上引入了新功能和改进&#xff0c;以提高性…

构建STM32MP133的Buildroot环境

意法半导体ST在坚持用 Yocto构建他们的OpenSTLinux MP1系列MCU&#xff0c;编译费劲&#xff0c;而且我们的应用不需要Yocto的环境&#xff0c;所以基于Buildroot的最小Linux系统更适合我们。 STM32MP133微处理器基于单Arm Cortex-A7内核&#xff0c;运行频率可达1 GHz&#x…

PACS医学影像采集传输与存储管理、影像诊断查询与报告管理系统,MPR多平面重建

按照国际标准IHE规范&#xff0c;以高性能服务器、网络及存储设备构成硬件支持平台&#xff0c;以大型关系型数据库作为数据和图像的存储管理工具&#xff0c;以医疗影像的采集、传输、存储和诊断为核心&#xff0c;集影像采集传输与存储管理、影像诊断查询与报告管理、综合信息…

使用JFLASH实现文件程序自动化合并及下载功能

主要总结下使用 SEGGER 工具集的 JFLASH 软件实现hex/bin文件合并以及程序的自动下载使用方法。 起因是最近使用到LVGL字库文件的制作&#xff0c;每次都要将分散的bin文件按既定分配的偏移作合并处理&#xff0c;刚开始使用的是二进制文件合并工具,文件少的时候还行&#xff…

C#使用DateTime.Now静态属性动态获得系统当前日期和时间

目录 一、实例 1.源码 2.生成效果 二、相关知识点 1.Thread类 &#xff08;1&#xff09;Thread.Sleep()方法 &#xff08;2&#xff09;Thread(ThreadStart) &#xff08;3&#xff09;IsBackground &#xff08;4&#xff09;Invoke( &#xff09; 2.CreateGrap…

【c++函数重载】

文章目录 一. 命名空间二 .全缺省参数和半缺省参数三 . 函数重载 一. 命名空间 1.不指定域&#xff1a;先在局部找&#xff0c;再全局。 2. 指定域&#xff1a;到指定的命名空间去找。 3. 当把指定命名空间放开时&#xff0c;即using namespace std&#xff1b;例如放开标准c库…

分布式 session

分布式 session 种 session 的时候需要注意范围&#xff0c;也就是 cookie.domain。 比如两个域名&#xff1a;a.heo.com&#xff0c;b.heo.com。如果要共享 cookie&#xff0c;可以种一个更高层的公共域名&#xff0c;比如 heo.com。 当服务器 A &#xff08;localhost:808…

大数据平台的硬件规划、网络调优、架构设计、节点规划

1.大数据平台硬件选型 要对Hadoop大数据平台进行硬件选型,首先需要了解Hadoop的运行架构以及每个角色的功能。在一个典型的Hadoop架构中,通常有5个角色,分别是NameNode、Standby NameNode、ResourceManager、NodeManager、DataNode以及外围机。 其中 NameNode 负责协调集群…

OneNote使用总结

试一下OneNote表格复制到CSDN的编辑器 用表格整理内容挺方便的&#xff0c;不过复制过来格式还是有些变化 目录 常用快捷键 高级应用 常用快捷键 文字编辑与排版 字号增加减小 Ctrl Shift 大于小于号 整行上下移动 左右缩进 Alt Shift方向 插入或转为公式 Alt 等于…

软件需求规格说明书-word

软件需求规格说明书编写规范 1.项目背景 2.项目目标 3.系统架构 4.总体流程 5.名称解释 6.功能模块 软件开发全文档获取&#xff1a;软件项目开发全套文档下载_软件项目文档-CSDN博客