首页 > 其他分享 >el-upload上传附件并携带其他参数

el-upload上传附件并携带其他参数

时间:2023-10-30 10:44:06浏览次数:34  
标签:el res addForm upload 表单 file 上传

 <el-dialog title="导入"
               :visible.sync="showExportDialog"
    >
      <el-form :model="addForm" ref="addForm" size="small" :rules="rules" label-width="130px">
        <el-form-item label="excel文件" prop="file">
          <el-upload style="display: inline-block;margin-left: 10px"
                    class="upload-demo"
                     ref="upload"
                     accept=".xls,.xlsx"
                  :data="addForm" // 发送请求的参数对象
                     :auto-upload="false" // 取消自动上传,获取file对象后先等一下
                     :action="uploadFileUrl" // 提交表单的url
                     :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>
        <el-form-item label="纸质扫描附件" prop="annexUrl">
          <fileUpload :isShowTip="false" :value="addForm.annexUrl" :limit="1" @input="getFileList"
                      :fileType="['png','jpg','jpeg']">
          </fileUpload>
        </el-form-item>
        <el-form-item label="培训现场其它说明" prop="notes" v-if="data_type==='train'">
          <el-input type="textarea" v-model="addForm.notes"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">取 消</el-button>
      <el-button type="primary" @click="submitComplete">确 定</el-button>
    </span>
    </el-dialog>

script部分

changeFile(file){
      this.curName = file.name; // 必须,选择文件后可把文件名展示出来,否则感觉没有选中文件一样。
    },
    // 导入成功
    handleUploadSuccess(res, file) {
      console.log('res',res);
      if (res.code !== 200) {
        return this.$alert(res.message, {
          dangerouslyUseHTMLString: true
        });
      } else {
        this.closeDialog();
        this.pageList();
      }
    },

 getFileList(filesList) {//纸质扫描附件,这里给参数对象的annexUrl赋值
       this.addForm.annexUrl= '';
       filesList?.forEach(el=>{
         this.addForm.annexUrl = el.url;
       })
    },
 // 导入:提交表单
    submitComplete() {
      console.log(this.addForm)
      this.$refs.addForm.validate(async (valid) => {
        if (valid) {
          this.$refs.upload.submit();  // 表单验证后这里直接调用el-upload组件自带的click方法。
        }
      });
    },

遇到的问题:

1、必须在上传组件el-upload组件上传,传递file(formData)类型的文件对象,表单验证后再传递(即使封装成formData)永远无法触发后台接口。

2、此时当选择的excel文件为必选项,则表单验证无法进行,因为file是el-upload自带的参数key,此时若再在addForm内部加一个file验证,则请求时会有两个file值,且是不对的。(待解决这个问题再来更新。)

标签:el,res,addForm,upload,表单,file,上传
From: https://www.cnblogs.com/LindaBlog/p/17797248.html

相关文章

  • C#学习笔记之使用Access读取Excel表格
    一、读取Excel表的内容(使用DataSet)1.DataSet定义:表示数据在内存中的缓存。可以理解为,将从Excel表中读取出来的数据存入DataSet类中,之后对DataSet进行数据处理,能提高处理的速度。2.DataSet属性和方法:①属性CaseSensitive:获取或设置一个值,该值指示DataTable中的字符串是否区分......
  • php怎么实现文件夹上传文件
    随着互联网的发展,网络应用程序也变得越来越普及。WEB应用程序成为一种非常受欢迎的应用程序开发模式。而PHP语言是一种非常出色的WEB编程语言。随着PHP语言的发展,PHP的功能也越来越强大。其中,文件上传就是PHP语言中非常重要的一个功能。在PHP编写的WEB应用程序开发过程中,经常会出......
  • 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......
  • 无涯教程-Clojure - Desktop – Displaying Labels函数
    可以在标签类的帮助下显示标签。以下程序显示了有关如何使用它的示例。(nsweb.core(:gen-class)(:require[seesaw.core:asseesaw]))(defn-main[&args](defndisplay[content](let[window(seesaw/frame:title"Example")](->win......
  • 使用telnet来调试游戏
    telnet是什么Telnet协议是TCP/IP协议族中的一员,是Internet远程登陆服务的标准协议和主要方式。它为用户提供了在本地计算机上完成远程主机工作的能力但是,telnet因为采用明文传送报文,安全性不好,很多Linux服务器都不开放telnet服务,而改用更安全的ssh方式了。但仍然有很多别的系统......
  • finalshell在sbt安装目录中使用下面命令创建一个Shell脚本文件,用于启动sbt:
    finalshell在sbt安装目录中使用下面命令创建一个Shell脚本文件,用于启动sbt:vim/usr/local/sbt/sbtlanguage-bash该脚本文件中的代码如下:#!/bin/bashSBT_OPTS="-Xms512M-Xmx1536M-Xss1M-XX:+CMSClassUnloadingEnabled-XX:MaxPermSize=256M"java$SBT_OPTS-jardirname$......
  • 多线程读取多个摄像头并把画面显示到Tkinter 的 label上面
    importcv2importthreadingimporttkinterastkfromPILimportImage,ImageTkclassCameraThread(threading.Thread):def__init__(self,camera_index,label):threading.Thread.__init__(self)self.camera_index=camera_indexs......