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){
    }


七、总结

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

相关文章
|
1天前
|
SQL JSON Java
springboot 如何编写增删改查后端接口,小白极速入门,附完整代码
本文为Spring Boot增删改查接口的小白入门教程,介绍了项目的构建、配置YML文件、代码编写(包括实体类、Mapper接口、Mapper.xml、Service和Controller)以及使用Postman进行接口测试的方法。同时提供了SQL代码和完整代码的下载链接。
springboot 如何编写增删改查后端接口,小白极速入门,附完整代码
|
1月前
|
前端开发 JavaScript
这篇文章介绍了如何使用form表单结合Bootstrap格式将前端数据通过action属性提交到后端的servlet,包括前端表单的创建、数据的一级和二级验证,以及后端servlet的注解和参数获取。
这篇文章介绍了使用AJAX技术将前端页面中表单接收的多个参数快速便捷地传输到后端servlet的方法,并通过示例代码展示了前端JavaScript中的AJAX调用和后端servlet的接收处理。
这篇文章介绍了如何使用form表单结合Bootstrap格式将前端数据通过action属性提交到后端的servlet,包括前端表单的创建、数据的一级和二级验证,以及后端servlet的注解和参数获取。
|
25天前
|
存储 关系型数据库 API
后端开发的艺术:从代码到云部署
在数字时代的浪潮中,后端开发如同一位默默无闻的艺术家,用代码绘制着互联网世界的底层画卷。本文将带你领略后端开发的奥秘,从基础的代码编写到复杂的云部署,每一步都是对技术深度与广度的挑战。我们将一起探索如何在变化莫测的技术海洋中找到自己的北极星,确保项目的成功和职业生涯的发展。无论你是初学者还是资深开发者,这篇文章都将为你提供新的视角和实用的技巧,让你的后端之旅更加精彩。
|
1月前
|
JSON 前端开发 API
Django 后端架构开发:通用表单视图、组件对接、验证机制和组件开发
Django 后端架构开发:通用表单视图、组件对接、验证机制和组件开发
45 2
|
1月前
|
前端开发 IDE Java
"揭秘前端转Java的秘径:SpringBoot Web极速入门,掌握分层解耦艺术,让你的后端代码飞起来,你敢来挑战吗?"
【8月更文挑战第19天】面向前端开发者介绍Spring Boot后端开发,通过简化Spring应用搭建,快速实现Web应用。本文以创建“Hello World”应用为例,展示项目基本结构与运行方式。进而深入探讨三层架构(Controller、Service、DAO)下的分层解耦概念,通过员工信息管理示例,演示各层如何协作及依赖注入的使用,以此提升代码灵活性与可维护性。
37 2
|
1月前
|
JavaScript 前端开发
Vue中传递自定义参数到后端、后端获取数据(使用Map接收参数)
这篇文章讲述了如何在Vue中通过Axios二次封装传递自定义参数到后端,并展示了后端如何使用Map接收这些参数,以及如何避免参数转换错误和统一接口设计的方法。
|
27天前
|
前端开发 开发者 Apache
揭秘Apache Wicket项目结构:如何打造Web应用的钢铁长城,告别混乱代码!
【8月更文挑战第31天】Apache Wicket凭借其组件化设计深受Java Web开发者青睐。本文详细解析了Wicket项目结构,帮助你构建可维护的大型Web应用。通过示例展示了如何使用Maven管理依赖,并组织页面、组件及业务逻辑,确保代码清晰易懂。Wicket提供的页面继承、组件重用等功能进一步增强了项目的可维护性和扩展性。掌握这些技巧,能够显著提升开发效率,构建更稳定的Web应用。
73 0
|
27天前
|
前端开发 程序员 API
从后端到前端的无缝切换:一名C#程序员如何借助Blazor技术实现全栈开发的梦想——深入解析Blazor框架下的Web应用构建之旅,附带实战代码示例与项目配置技巧揭露
【8月更文挑战第31天】本文通过详细步骤和代码示例,介绍了如何利用 Blazor 构建全栈 Web 应用。从创建新的 Blazor WebAssembly 项目开始,逐步演示了前后端分离的服务架构设计,包括 REST API 的设置及 Blazor 组件的数据展示。通过整合前后端逻辑,C# 开发者能够在统一环境中实现高效且一致的全栈开发。Blazor 的引入不仅简化了 Web 应用开发流程,还为习惯于后端开发的程序员提供了进入前端世界的桥梁。
43 0
|
1月前
|
消息中间件 缓存 Java
如何优化大型Java后端系统的性能:从代码到架构
当面对大型Java后端系统时,性能优化不仅仅是简单地提高代码效率或硬件资源的投入,而是涉及到多层次的技术策略。本篇文章将从代码层面的优化到系统架构的调整,详细探讨如何通过多种方式来提升Java后端系统的性能。通过对常见问题的深入分析和实际案例的分享,我们将探索有效的性能优化策略,帮助开发者构建更高效、更可靠的后端系统。
|
1月前
|
JSON 前端开发 Java
前端如何提交数据给后端(包含前端和后端代码)
前端如何提交数据给后端(包含前端和后端代码)

热门文章

最新文章