element的事件想要传输额外的参数_element 方法中传递额外参数-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_55582221/article/details/122369646

在使用Element UI的Upload组件进行文件上传时，遇到需求要将额外参数传递给接口。为保持代码规范，避免在按钮点击事件中预先赋值，探寻了在组件事件中附带额外参数的方法。现在能在上传成功的回调函数中获取并打印这些额外参数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在使用element的upload组件的时候，发现上传成功的时候我请求接口，但是这个接口有个额外的参数需要在上传文件之前就要获取到。

                <el-upload
                    ref="uploadFile"  
                    :action="'/sys/common/upload'"
                    :headers="headers"
                    :accept="acceptFileTypeDocx"
                    :before-upload="beforeUploadDocx"
                    :on-success="uploadSuccess"
                    :on-error="uploadError"
                    :auto-upload="true"
                    :limit="1"
                    :file-list="fileList"
                    :show-file-list="false"
                    style="float: left;margin-right: 6px;">
                     <el-button type="text" @click="row(row)">上传</el-button>
                  </el-upload>

本来是想在按钮上增加一个事件，在点击事件中把需要的参数赋值到一个变量中，但是这样的话，感觉写的代码不太规范，就又去寻找其他的方法。

找到了可以在组件事件中传输本身这个事件以外的参数。

:on-success=”(value)=> handleSuccess(i, value)”

在这个函数中就可以打印出这个额外的参数了

<el-upload
                    ref="uploadFile"  
                    :action="'/sys/common/upload'"
                    :headers="headers"
                    :accept="acceptFileTypeDocx"
                    :before-upload="beforeUploadDocx"
                    :on-success="(res)=>uploadSuccess(res,'docx',row)"
                    :on-error="uploadError"
                    :auto-upload="true"
                    :limit="1"
                    :file-list="fileList"
                    :show-file-list="false"
                    style="float: left;margin-right: 6px;">
                     <el-button type="text">上传</el-button>
                  </el-upload>

uploadSuccess(res,type,row){
    console.log('row',row) //row就是传输的这个额外的参数
}