使用element-ui中的el-upload组件时携带其他参数

Posted gnh96

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用element-ui中的el-upload组件时携带其他参数相关的知识,希望对你有一定的参考价值。

<el-upload
        class="upload-demo"
        ref="upload"  
        :action="uploadURL+‘/customer/excel‘"   //后台接口(接受上传的文件并做后端的逻辑处理)
        :headers="headers"
        accept=".xlsx,.xls"  // 限制文件格式
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :on-success="handleSuccess" //上传文件成功时的回调函数
        :file-list="fileList"
        :limit="1"  // 限制文件个数
        :data="uploadData"   //上传文件时要上传的额外参数
        :on-exceed="handleExceed"
        :auto-upload="false">  //停止文件自动上传模式
        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
 </el-upload>

 data中

export default {
 data() {
    uploadData:{name: this.$parent.name}  
    // name为java后台需要接收的数据,
this.$parent.name则是获取父组件的name
  } 
}

 

以上是关于使用element-ui中的el-upload组件时携带其他参数的主要内容,如果未能解决你的问题,请参考以下文章

vue 使用element-ui的el-upload httprequest实现上传文件到后台的功能

element-ui中upload组件如何传递文件及其他参数

element-ui upload组件多文件上传

基于element-ui封装上传图片到腾讯云Cos组件

element-ui el-upload限制图片格式尺寸及图片

element-ui el-upload限制图片格式尺寸及图片