element el-upload组件before-upload及on-success回调传递额外参数

element el-upload组件before-upload及on-success回调传递额外参数

html:

<el-upload
    v-loading="加载状态"
    name="文件参数名"
    :action="上传请求地址"
    :headers="请求头额外参数"
    :before-upload="
       (res) => {
           return beforeUpload(res, '额外参数');
        }
     "
     :on-success="
        (res) => {
            return uploadSuccess(res, '额外参数');
         }
     "
>
     <el-button>上传</el-button>
</el-upload>

js:

methods: {
	    // 图片上传前
    beforeUpload(res, type) {
      console.log(res) // 文件详情
      console.log(type) // 额外参数
    },
    // 图片上传成功
    uploadSuccess(res, type) {
      console.log(res) // 上传接口返回结果
      console.log(type) // 额外参数
    }
}

完事~

  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
el-upload组件element-ui中的一个上传组件,它提供了一个on-success属性,用于定义上传成功后的回调函数。但是在某些情况下,该属性可能会不生效。 首先,我们需要确定是否正确使用了el-upload组件和on-success属性。在使用el-upload时,我们需要确保正确引入了element-ui库,并在组件的template中使用了el-upload标签,并将on-success属性绑定到一个处理函数上。处理函数会在上传成功时被调用,我们可以在该函数中执行一些自定义的操作。 如果确定代码正确且on-success属性还是不生效,可能是由于以下几个原因导致的。 1. 上传接口的返回结果不符合预期:on-success属性只在上传返回结果的http状态码为200时触发。如果上传接口返回的http状态码不为200,on-success属性不会生效。此时,我们需要检查服务器端代码,确保上传接口返回的http状态码正确。 2. on-success属性被覆盖或重写:在el-upload组件中,有可能存在其他相关的事件属性,如before-upload、on-progress等。如果这些属性中覆盖或重写了on-success属性,那么on-success属性可能会失效。此时,我们需要检查组件的其他事件属性,并确保没有重复或覆盖on-success属性。 3. 组件版本兼容性问题:el-upload组件的版本不同,对于on-success属性的实现方式可能会有所差异,通过升级或降级组件版本,可以尝试解决on-success属性不生效的问题。 总结来说,如果el-upload组件的on-success属性不生效,我们可以先确认代码是否正确且引入了element-ui库,然后检查上传接口的返回结果是否符合预期,同时查看是否有其他事件属性重写或覆盖了on-success属性,最后考虑组件版本兼容性问题。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值