form表单校验复杂系列--- form表单内插入独立的数据表格，动态校验数据表格内每行的文件上传

form表单校验复杂系列— form表单内插入独立的数据表格，动态校验数据表格内每行的文件上传

前言

公司项目有个模块需要优化form表单内，插入独立的数据表格，表格内容是文件上传，需要利用外部表单提交时，根据后台返回rules动态校验每一行的文件上传功能以及文件类型。

思路

利用表单校验原有的部分功能和样式，自定义校验函数validateAttach，利用prop和ref字符串+index拼接功能锁定table数据每一行数据进行判断处理，点击上传按钮做个index记录，以便上传前进行文件类型校验限制。

代码说明

代码主要逻辑如下，为了降低阅读成本，部分代码进行了简写，大概功能描述下：

fileIssueList为内部table数据源，内部包含字段required(是否必传)、fileList(行文件列表)等
el-form-item 属性 prop和ref的值采用fileList${scope.$index}拼接
自定义validateAttach校验函数，其中原有rule参数包含属性field，此本来表示外围form表单数据源里面的某个属性，这里偷梁换柱用来锁定数据表格行数据，以便callback弹窗提示到当前行
提交成功后记得要在handleSuccess方法里面清除原有的校验提示哟
5、

<el-form><el-form-item><el-input></el-input></el-form-item><el-form-item><el-input></el-input></el-form-item>....<el-row class="dialogTable"><el-table :data="fileIssueList" border><el-table-column header-align="center" label="附件"><template slot-scope="scope"><el-form-item :rules="{validator: validateAttach, trigger: 'change'}" label=" " :prop="`fileList${scope.$index}`" :key="scope.row.index" :ref="`fileList${scope.$index}`"><el-upload :action="loadurl+'/file/upload'" :on-success="handleSuccess"   :file-list="scope.row.fileList" :before-upload="handleBefore"><el-button size="mini" type="primary" @click="saveIndex(scope.$index)">点击上传</el-button></el-upload></el-form-item></template></el-table-column></el-table>
</el-row>
</el-form>

methods: {validateAttach (rule, value, callback) {let valite = falselet num = rule.field.substr(8)if (this.fileIssueList.length && this.fileIssueList[num]) {if (this.fileIssueList[num].required && this.fileIssueList[num].fileList.length === 0) valite = true}else {callback(new Error('附件不能为空1111'))}if (valite) {callback(new Error('附件不能为空'))}else {callback()}},handleSuccess () {if (this.fileIssueList.length) {this.fileIssueList.forEach((v,i) => {if (v.required && v.fileList.length === 0){}else {this.$refs[`fileList${i}`].clearValidate()}})}},handleBefore(file) {var fileSize = (file.size / 1024 / 1024) < 5 //这里做文件大小限制var currentFileRow =  this.fileIssueList[this.currIndex] if(!fileSize) {/*****弹层提示--上传文件大小不能超过 5MB!**/}var Index = file.name.lastIndexOf('.')var fileTypeStr = file.name.substr(Index+1)//文件格式也可以后台返回if('pdf,jpg,png,xls,xlsx'.indexOf(fileTypeStr) < 0) {/*****弹层提示--文件格式仅限 pdf,jpg,png,xls,xlsx!,**/                        return false}return fileSize;},saveIndex (val){this.currIndex = val},}

动态效果图：

form表单校验复杂系列--- form表单内插入独立的数据表格，动态校验数据表格内每行的文件上传相关推荐

ssm上传文件进度条_Java 单文件、多文件上传 / 实现上传进度条
日常,工作在这里总结一下上传吧(是以前做过的练习,就汇总到个人博客吧) java ssm 框架实现文件上传实现:单文件上传.多文件上传(单选和多选),并且用 ajax 异步刷新,在当前界面显示上传 ...
vueform表单文件上传_峰哥说技术系列-8.Spring Boot文件上传(Form表单和Ajax方式)
今日份主题 Spring Boot文件上传(Form表单和Ajax方式) 在Spring Boot中,和文件上传的主要和MultipartResolver接口有关,他有两个实现类 StandardSe ...
form表单通过request取不到值multipart/form-data 文件上传表单中传递参数无法获取的原因!
1.什么是multipart/form-data 首先我们需要明白在html中的enctype属性, enctype:规定了form表单在发送到服务器时候编码方式.他有如下的三个值. ①appli ...
Ajax（form表单文件上传、请求头之contentType、Ajax传递json数据、Ajax文件上传）
form表单文件上传上菜 file_put.html <form action="" method="post" enctype="multi ...
【HTML5初探之form标签】解放表单验证、增加文件上传、集成拖放
导航 [初探HTML5之使用新标签布局]用html5布局我的博客页! [HTML5初探之form标签]解放表单验证.增加文件上传.集成拖放 [HTML5初探之绘制图像(上)]看我canvas元素引领下 ...
文件上传 java 完美,vue+java实现文件上传（excel等），会出现跨域问题，直接用form表单提交就不会有问题了（new FormData()）...
vue+java实现文件上传(excel等),会出现跨域问题,直接用form表单提交就不会有问题了(new FormData()) 地址:https://www.cnblogs.com/muscles ...
java form 上传文件_java通过表单进行文件上传的几种方法
上传文件的分类: 无论什么方式上传文件,都要用post提交方式一: 前端:表单方式上传文件后端: 使用上传技术是apache中的Commons-fileupload.jar commons-io. ...
传统form表单提交方式的文件上传与文件存储
引言时隔一天,上一篇文章<文件存储>刚一停笔,今天上午就解决了困扰我已久的文件上传问题. 站在一个已实现功能的角度来重新看待这个文件上传的业务:编辑页面选择jar包,然后通过form表单 ...
ajax post form上传图片,ajax怎样提交form表单与实现文件上传
这次给大家带来ajax怎样提交form表单与实现文件上传,ajax提交form表单与实现文件上传的注意事项有哪些,下面就是实战案例,一起来看一下. 前几天,发现了一些小问题.我在写后台管理页面时,需要 ...

form表单校验复杂系列--- form表单内插入独立的数据表格，动态校验数据表格内每行的文件上传

form表单校验复杂系列— form表单内插入独立的数据表格，动态校验数据表格内每行的文件上传

前言

思路

代码说明

动态效果图：

form表单校验复杂系列--- form表单内插入独立的数据表格，动态校验数据表格内每行的文件上传相关推荐

最新文章

热门文章