首页 > 其他分享 >el-upload上传必填验证

el-upload上传必填验证

时间:2023-10-30 11:47:01浏览次数:34  
标签:el 必填 refs addForm upload fileList file

 <el-form-item label="excel文件" prop="file">
          <el-upload style="display: inline-block;margin-left: 10px"
                    class="upload-demo"
                     ref="upload"
                     :file-list="addForm.file"
                     accept=".xls,.xlsx"
                     :data="addForm"
                     :auto-upload="false"
                     :action="uploadFileUrl"
                     :headers="headers"
                     :show-file-list="false"
                     :on-success="handleUploadSuccess"
                     :on-change="changeFile"
                     >
            <span v-if="curName">{{curName}}</span>
            <el-button type="primary" icon="" v-else>选文件</el-button>
          </el-upload>
        </el-form-item>

data部分

 addForm: {
        file:[],
        annexUrl:''
      },
      rules: {
        file: [
          {required: true, message: '导入文件不能为空'}
        ]
      },

 

script部分

changeFile(file,fileList){
      this.curName = file.name;
      if (fileList.length > 0) {
        this.addForm.file = fileList;
        this.$refs.addForm.clearValidate('file'); //清除文字校验
      }
    },
 // 导入:提交表单
    submitComplete() {this.$refs.addForm.validate(async (valid) => {
        if (valid) {if(typeof this.addForm.file == 'object'){  // 验证加的file可以删除,也可留着。
            delete this.addForm.file;
          }
          this.$refs.upload.submit(); // upload提交
        }
      });
    },

 

 

 

标签:el,必填,refs,addForm,upload,fileList,file
From: https://www.cnblogs.com/LindaBlog/p/17797407.html

相关文章

  • HExcel,一个简单通用的导入导出Excel工具类
    前言日常开发中,Excel的导出、导入可以说是最常见的功能模块之一,一个通用的、健壮的的工具类可以节省大量开发时间,让我们把更多精力放在业务处理上中之前我们也写了一个Excel的简单导出,甚至可以不依赖poi,还扩展了纯前端导出Excel!详情请戳:《POI导出Excel 》,遗憾的是......
  • FinalShell密码解密
    publicstaticbyte[]desDecode(byte[]data,byte[]head)throwsException{SecureRandomsr=newSecureRandom();DESKeySpecdks=newDESKeySpec(head);SecretKeyFactorykeyFactory=SecretKeyFactory.getInstance("DES");......
  • 工作常用的EXCEL公式 | 某列相同的数据进行汇总
    需求:解决方法:1、对部门排序,再进行分类汇总(数据-分类汇总) 2、选中A列,CTRL+G,快速定位空值,然后点击合并单元格3、选中A列,然后点击格式刷,刷在B列 4、取消分类汇总 5、删除A列,然后筛选B列为0的数据,然后删除,即可。 (调整一下格式即可) ......
  • Laravel中Seeder和Factory都能填充数据,区别整理
    Seeder和Factory都是用于填充模拟数据的工具,但它们在使用方式和应用场景上有一些区别。Seeder(数据填充器):Seeder是Laravel框架中的一种机制,用于填充数据库表中的初始数据。Seeder允许您定义和执行数据库表的初始数据填充操作。您可以创建一个或多个Seeder类,并在其中定......
  • el-upload上传附件并携带其他参数
    <el-dialogtitle="导入":visible.sync="showExportDialog"><el-form:model="addForm"ref="addForm"size="small":rules="rules"label-width="130px">......
  • C#学习笔记之使用Access读取Excel表格
    一、读取Excel表的内容(使用DataSet)1.DataSet定义:表示数据在内存中的缓存。可以理解为,将从Excel表中读取出来的数据存入DataSet类中,之后对DataSet进行数据处理,能提高处理的速度。2.DataSet属性和方法:①属性CaseSensitive:获取或设置一个值,该值指示DataTable中的字符串是否区分......
  • laravel:多图片上传(10.27.0/前端vue)
    一,相关文档https://learnku.com/docs/laravel/10.x/filesystem/14865#481e03二,前端vue代码123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657......
  • laravel:单图片上传(10.27.0/前端vue)
    一,相关文档https://learnku.com/docs/laravel/10.x/filesystem/14865#481e03二,前端vue代码123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657......
  • Python 利用pymysql和openpyxl操作MySQL数据库并插入Excel数据
    1.需求分析本文将介绍如何使用Python连接MySQL数据库,并从Excel文件中读取数据,将其插入到MySQL数据库中。2.环境准备在开始本文之前,请确保您已经安装好了以下环境:Python3.xPyMySQL库openpyxl库MySQL数据库3.连接MySQL数据库我们可以使用pymysql库来连接MySQL数据库......
  • powershell-后台启动任务
    win11中vbs的文件关联被去掉了,vbs文件不能双击执行,开机启动一个不显示窗口的任务无法完成;解决办法:控制页面-》系统和安全-》计划任务--》执行命令比如我们需要开机自启动wsl中的某个服务:Setws=WScript.CreateObject("WScript.Shell")ws.run"wsl-uroot/etc/init......