el-upload上传附件连带表单其它内容上传问题

news/2024/7/10 1:26:19 标签: 前端, vue, elementui

点击提交时,需要同时传给后端上传文件的参数和摘要文本框中的内容

      <el-form>
        <el-form-item label="摘要" :label-width="formLabelWidth" >
          <el-input type="textarea" v-model="fileData.unAbstract"></el-input>
        </el-form-item>
        <el-form-item label="附件" :label-width="formLabelWidth" >
          <el-upload
            :data="fileData"    
            :action="urlAction"
            ref="upload"
            :on-remove="handleRemove"
            :on-success="handleSuccess"
            :before-upload="beforeAvatarUpload"
            :file-list="fileList"
            :on-change="handleChange"
            :auto-upload="false">
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
       <el-button type="primary" @click="submit">提交</el-button>

action这个属性是上传文件的地址,提交方式为post,auto-upload 属性可以控制是否自动提交,需要传递参数时,通过el-upload的data属性传递。提交附件时,如果需要连同表单内其它内容一同传入后端,只需将表单需要传递内容的v-model绑定到el-upload的data中,由于data是双向绑定,通过如下提交方式,可以提交所有定义在 fileData中的数据。

methods: {
    submit(){
      this.$refs.upload.submit();
    },
  },
  data () {
    return {
      urlAction: window.SITE_CONFIG['baseUrl'] + '/unionFile/uploadFile',
	  fileData: {
	      unAbstract:'', //摘要
	      tableUuid: '',
	      tableName: '',
	      tableKey: '',
	      creatorId:'',
	    },
	   };
	  },

http://www.niftyadmin.cn/n/1514570.html

相关文章

java软件运行常见错误_java常见运行错误有哪些?

在Java中&#xff0c;根据错误性质将运行错误分为两大类&#xff1a;错误和异常。Java中的所有异常都是由Throwable类的子类生成的对象&#xff0c;所有的异常类都是Throwable类的子类或子类的子类。Throwable类是Object类的直接子类&#xff0c;Error类和Exception类是Throwab…

MySql与SqlServer的一些常用用法的差别

MySql与SqlServer的一些常用用法的差别 由于工作的原因&#xff1a;上家公司的数据库全采用MySql&#xff0c;所以不得不用它。因此也学到了MySql的一些知识&#xff0c;但考虑到今后可能没机会使用了&#xff0c;所以想趁现在离职在家休息&#xff0c;打算把这些东西整理一下&…

javascript学习笔记-知识点总结-基础知识 (2)

操作符 一元操作符 只能操作一个值的操作符叫做一元操作符1.递增递减操作符前置型&#xff1a;(--)值先递增(递减)&#xff0c;后执行语句后置型&#xff1a;值(--)先使用值执行语句&#xff0c;后递增(递减) 2.一元加和减操作符一元加操作符(),放在数值前&#xff0c;不会产…

javascript学习笔记-知识点总结-基础知识 (3)

语句 if语句 if(condition){alert(1);}else{alert(2);},condition可以是任意表达式&#xff0c;然后自动调用boolean&#xff08;&#xff09;将这个表达式转换成一个布尔值do-while语句 var i 1;do{i;} while (i < 20);循环体内代码至少执行一次&#xff0c;上述代码中&a…

java eml 附件_email – 带有所有附件的Java MimeMessage到eml文件

试试这个 &#xff1a;// Create your attachement fileFile emlFile new File("myFile.eml");emlFile.createNewFile();incomingEmail.getMessage().writeTo(new FileOutputStream(emlFile));MimeBodyPart attachment new MimeBodyPart();DataSource source new …

通过模拟form表单实现post方法批量下载文件

以下是在vue项目中&#xff0c;通过模拟原生form表单实现批量下载 绑定点击事件<el-button click"mulDownload()">批量下载</el-button>在data里定义下载接口地址urlActionMulDownload: window.SITE_CONFIG[baseUrl] /unionFile/downloadZip,给postUrl方…

DTO的理解以及spring遇到的一个问题注解方式对象为空

之前不明白有些框架中为什么要专门定义DTO来绑定表现层中的数据&#xff0c;为什么不能直接用实体模型呢&#xff0c;有了DTO同时还要维护DTO与Model之间的映射关系&#xff0c;多麻烦。然后看了这篇文章中的讨论部分才恍然大悟。摘两个比较有意义的段落。表现层与应用层之间是…

java switch嵌套_if 里嵌套case(用到switch)

//账户密码登录&#xff0c;成功或者失败&#xff0c;成功进入后循环打印图形&#xff0c;不需要打印再退出package homework1116;//账户密码登录&#xff0c;成功或者失败&#xff0c;成功进入后循环打印图形&#xff0c;不需要打印再退出import java.util.Scanner;public cla…