在el-uploadon-success回调函数中拿到el-upload标签上边绑定的自定义属性
时间: 2023-11-01 16:54:18 浏览: 188
在el-upload的on-success回调函数中,可以通过event对象获取el-upload标签上绑定的自定义属性。具体步骤如下:
1. 在on-success回调函数中,接收一个参数,通常命名为response,用于获取上传成功后的返回数据。
2. 在回调函数内部,使用event.currentTarget来访问el-upload标签的DOM元素。
3. 通过getAttribute方法,传入自定义属性的名称,即可获取到相应的值。
下面是一个示例代码:
```javascript
<template>
<el-upload
action="/upload"
:on-success="handleSuccess"
:data="uploadData"
:custom-attribute="customAttribute"
>
<el-button slot="trigger">点击上传</el-button>
</el-upload>
</template>
<script>
export default {
data() {
return {
uploadData: {},
customAttribute: 'custom value'
}
},
methods: {
handleSuccess(response, file, fileList) {
// 获取el-upload标签上绑定的自定义属性
const customAttribute = event.currentTarget.getAttribute('custom-attribute');
console.log(customAttribute); // 输出:'custom value'
// 处理上传成功后的逻辑
// ...
}
}
}
</script>
```
在上述示例中,通过event.currentTarget来访问el-upload标签的DOM元素,然后使用getAttribute方法获取到自定义属性的值。注意,在示例中的handleSuccess函数中未直接传入event对象,而是省略了参数,在实际使用时需要根据具体情况传入。
阅读全文
相关推荐


















