el-upload上传文件和表单一起提交+后端接收代码

简介: el-upload上传文件和表单一起提交+后端接收代码

el-upload上传文件和表单一起提交+后端接收代码


文章目录

一、前言

二、前端页面展示

三、表单代码

四、Data部分

五、JS方法

六、后端接收方式

七、总结


一、前言

我们在做前端时,会遇到这样的需求,上传Excel文件,并且还要和填写的表单数据,一起发送.我们知道el-upload默认的是选中文件后直接请求到后端的接口.现在就需要我们修改这种默认的上传形式,和填写完的form表单一起请求后端接口.


二、前端页面展示


三、表单代码

  <el-dialog title="导入源数据库表单信息" :visible.sync="dialogVisible1">
      <el-form ref="importFormRef" :model="importForm" :rules="importFormRules" label-width="130px">
        <el-form-item label="病种kgCode:" prop="kgCode" >
          <el-input v-model="importForm.kgCode" ></el-input>
        </el-form-item>
        <el-form-item label="目标数据库URL:" prop="targetUrl" >
          <el-input v-model="importForm.targetUrl"></el-input>
        </el-form-item>
        <el-form-item label="目标数据库账号:" prop="targetUsername" >
          <el-input v-model="importForm.targetUsername"></el-input>
        </el-form-item>
        <el-form-item label="目标数据库密码: " prop="targetPassword" >
          <el-input v-model="importForm.targetPassword"></el-input>
        </el-form-item>
        <el-form-item label="上传文件:" prop="excel">
          <el-upload
            class="upload-demo"
            ref="upload"
            action<!-- 这里比填,异步时写后端接口,就可以,我们不用,所以不谢-->
            :http-request="httpRequest"<!--覆盖默认的上传行为,可以自定义上传的实现-->
            :before-upload="beforeUpload"<!--这是上传前的处理方法-->
            :on-exceed="handleExceed"<!--文件超出个数限制时的钩子-->
            :limit="1">
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            <div slot="tip" class="el-upload__tip">只能上传.xlsx文件,且不超过5M</div>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitImportForm">开始导入</el-button>
          <el-button type="info" @click="dialogVisible = false">关闭窗口</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>


四、Data部分

  //对话框控制权
  dialogVisible1:false,
  //导入表单数据
    importForm:{
      kgCode:'',
      targetUrl:'',
      targetUsername:'',
      targetPassword:'',
    },
    //存放上传文件
    fileList: []


五、JS方法

  // 覆盖默认的上传行为,可以自定义上传的实现,将上传的文件依次添加到fileList数组中,支持多个文件
      httpRequest(option) {
        this.fileList.push(option)
      },
      // 上传前处理
      beforeUpload(file) {
        let fileSize = file.size
        const FIVE_M= 5*1024*1024;
        //大于5M,不允许上传
        if(fileSize>FIVE_M){
          this.$message.error("最大上传5M")
          return  false
        }
        //判断文件类型,必须是xlsx格式
        let fileName = file.name
        let reg = /^.+(\.xlsx)$/
        if(!reg.test(fileName)){
          this.$message.error("只能上传xlsx!")
          return false
        }
        return true
      },
      // 文件数量过多时提醒
      handleExceed() {
        this.$message({ type: 'error', message: '最多支持1个附件上传' })
      },
      //导入Excel病种信息数据
      submitImportForm() {
        // 使用form表单的数据格式
        const params = new FormData()
        // 将上传文件数组依次添加到参数paramsData中
        this.fileList.forEach((x) => {
          paramsData.append('file', x.file)
        });
        // 将输入表单数据添加到params表单中
        params.append('kgCode', this.importForm.kgCode)
        params.append('targetUrl', this.importForm.targetUrl)
        params.append('targetUsername', this.importForm.targetUsername)
        params.append('targetPassword', this.importForm.targetPassword)
    //这里根据自己封装的axios来进行调用后端接口
        this.httpPostWithLoading(IMPORT_URL,paramsData).then(match => {
          if (match.success) {
            this.$message({
              message: "导入成功",
              type: "success"
            })
          }else{
            this.$message({
              message: "导入失败",
              type: "error"
            })
          }
          this.$refs.importFormRef.resetFields()//清除表单信息
          this.$refs.upload.clearFiles()//清空上传列表
          this.fileList = []//集合清空
          this.dialogVisible1 = false//关闭对话框
        })
      }


六、后端接收方式

  @PostMapping("/importExcel")
    public JsonResult importExcel(MultipartFile file, String kgCode, String targetUrl, 
      String targetUsername, String targetPassword){
    }


七、总结

这样就可以完成上传的文件和表单一起请求后端接口,解决了您的问题,一键三联走起来!!!谢谢大家

相关文章
|
3月前
|
缓存 前端开发
后端MultipartFile接收文件转Base64
后端MultipartFile接收文件转Base64
123 8
|
1月前
|
缓存 前端开发
后端MultipartFile接收文件转Base64
后端MultipartFile接收文件转Base64
35 5
|
1月前
|
jenkins Java 测试技术
如何使用 Jenkins 自动发布 Java 代码,通过一个电商公司后端服务的实际案例详细说明
本文介绍了如何使用 Jenkins 自动发布 Java 代码,通过一个电商公司后端服务的实际案例,详细说明了从 Jenkins 安装配置到自动构建、测试和部署的全流程。文中还提供了一个 Jenkinsfile 示例,并分享了实践经验,强调了版本控制、自动化测试等关键点的重要性。
73 3
|
2月前
|
机器学习/深度学习 PyTorch 算法框架/工具
揭秘深度学习中的微调难题:如何运用弹性权重巩固(EWC)策略巧妙应对灾难性遗忘,附带实战代码详解助你轻松掌握技巧
【10月更文挑战第1天】深度学习中,模型微调虽能提升性能,但常导致“灾难性遗忘”,即模型在新任务上训练后遗忘旧知识。本文介绍弹性权重巩固(EWC)方法,通过在损失函数中加入正则项来惩罚对重要参数的更改,从而缓解此问题。提供了一个基于PyTorch的实现示例,展示如何在训练过程中引入EWC损失,适用于终身学习和在线学习等场景。
136 4
揭秘深度学习中的微调难题:如何运用弹性权重巩固(EWC)策略巧妙应对灾难性遗忘,附带实战代码详解助你轻松掌握技巧
|
1月前
|
数据库 开发者
后端开发的哲学:代码与人生的交织
在数字化的时代,后端开发不仅仅是技术的堆砌,它更像是一场深刻的人生修炼。本文将探讨后端开发中蕴含的哲理,以及这些哲理如何影响我们的职业生涯和人生观。我们将从代码的本质出发,逐步深入到人生的意义,最终理解为何“你必须成为你希望在世界上看到的改变。”
|
2月前
|
jenkins Java 测试技术
如何使用 Jenkins 自动发布 Java 代码,通过一个电商公司后端服务的实际案例详细说明
【10月更文挑战第8天】本文介绍了如何使用 Jenkins 自动发布 Java 代码,通过一个电商公司后端服务的实际案例,详细说明了从 Jenkins 安装配置到自动构建、测试和部署的全流程。文中还提供了一个 Jenkinsfile 示例,并分享了实践经验,强调了版本控制、自动化测试等关键点的重要性。
43 5
|
1月前
|
缓存 前端开发
后端MultipartFile接收文件转Base64
后端MultipartFile接收文件转Base64
46 0
|
2月前
|
JSON 前端开发 数据格式
@RequestMapping运用举例(有源码) 前后端如何传递参数?后端如何接收前端传过来的参数,传递单个参数,多个参数,对象,数组/集合(有源码)
文章详细讲解了在SpringMVC中如何使用`@RequestMapping`进行路由映射,并介绍了前后端参数传递的多种方式,包括传递单个参数、多个参数、对象、数组、集合以及JSON数据,并且涵盖了参数重命名和从URL中获取参数的方法。
239 0
@RequestMapping运用举例(有源码) 前后端如何传递参数?后端如何接收前端传过来的参数,传递单个参数,多个参数,对象,数组/集合(有源码)
|
2月前
|
前端开发 Java
学习SpringMVC,建立连接,请求,响应 SpringBoot初学,如何前后端交互(后端版)?最简单的能通过网址访问的后端服务器代码举例
文章介绍了如何使用SpringBoot创建简单的后端服务器来处理HTTP请求,包括建立连接、编写Controller处理请求,并返回响应给前端或网址。
62 0
学习SpringMVC,建立连接,请求,响应 SpringBoot初学,如何前后端交互(后端版)?最简单的能通过网址访问的后端服务器代码举例
|
2月前
|
存储 数据管理 API
零代码能力:轻松搞定表单和API接口,少写80%后端代码,内含资源
小白接口(果创云 YesApi.cn)是一个零代码和低代码开发平台,提供一站式后端云服务,帮助开发者、学生、业余爱好者、工作室、中小企业及无IT技术人员的传统企业快速搭建应用、接口、服务和网站。平台提供500+免费API接口,支持在线API开发、在线表单、数据库管理、图片文件存储、会员管理等功能,无需后端开发经验,轻松实现数据处理和应用开发。