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

 更新时间:2024年06月14日 10:50:47   作者:Cutecumber  
有多个upload组件,每个都需要单独上传获取文件(JS File类型),不需要action上传到指定url,自定义上传动作和http操作,下面通过本文给大家分享Element-UI 多个el-upload组件自定义上传不用上传url并且携带自定义传参(文件序号),感兴趣的朋友一起看看吧

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()
            for (let i = 0; i < this.list.length; i++) {
            	// 如果有文件未上传,则报错。确保每个el-upload都上传了文件
                if (!this.fileUploaded[i]){
                    return this.$message.error('请上传'+this.list[i].value)
                }
                formdata.append('subMerCertFiles', this.fileUploaded[i]) // 多个文件上传
            }
            // 后面调用接口,上传formdata
       	}
    }
}
</script>

演示

在这里插入图片描述

在这里插入图片描述

到此这篇关于Element-UI 多个el-upload组件自定义上传,不用上传url,并且携带自定义传参(文件序号)的文章就介绍到这了,更多相关Element-UI 多个el-upload组件自定义上传内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 利用Vue.js实现求职在线之职位查询功能

    利用Vue.js实现求职在线之职位查询功能

    Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的。下面这篇文章主要给大家介绍了关于利用Vue.js实现求职在线之职位查询功能的相关资料,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-07-07
  • Vue MVVM模型与data及methods属性超详细讲解

    Vue MVVM模型与data及methods属性超详细讲解

    MVVM旨在利用WPF中的数据绑定函数,通过从视图层中几乎删除所有GUI代码(代码隐藏),更好地促进视图层开发与模式其余部分的分离,这篇文章主要介绍了Vue MVVM模型与data及methods属性
    2022-10-10
  • 关于页面刷新vuex数据消失问题解决方案

    关于页面刷新vuex数据消失问题解决方案

    本篇文章主要介绍了关于页面刷新vuex数据消失问题解决方案 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • vue2中使用quill编辑器+表格功能(步骤详解)

    vue2中使用quill编辑器+表格功能(步骤详解)

    这篇文章主要介绍了vue2中使用quill编辑器+表格功能,本文分步骤结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-09-09
  • vue使用laydate时间插件的方法

    vue使用laydate时间插件的方法

    这篇文章主要为大家详细介绍了vue使用laydate时间插件的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-11-11
  • 如何在vue 中引入使用jquery

    如何在vue 中引入使用jquery

    这篇文章主要介绍了如何在vue 中引入使用jquery,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下
    2020-11-11
  • Vue.js使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用

    Vue.js使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用

    这篇文章主要介绍了 Vue.js使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • vue 标签属性数据绑定和拼接的实现方法

    vue 标签属性数据绑定和拼接的实现方法

    这篇文章主要介绍了vue 标签属性数据绑定和拼接的实现方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • vue返回上一页(后退)的几种方法与区别说明

    vue返回上一页(后退)的几种方法与区别说明

    这篇文章主要介绍了vue返回上一页(后退)的几种方法与区别说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • Vue Element前端应用开发之表格列表展示

    Vue Element前端应用开发之表格列表展示

    在我们一般开发的系统界面里面,列表页面是一个非常重要的综合展示界面,包括有条件查询、列表展示和分页处理,以及对每项列表内容可能进行的转义处理,本篇随笔介绍基于Vue +Element基础上实现表格列表页面的查询,列表展示和字段转义处理。
    2021-05-05

最新评论