el-upload success事件
时间: 2024-09-12 11:12:08 浏览: 49
elemetUi 组件--el-upload实现上传Excel文件的实例
5星 · 资源好评率100%
el-upload是Element UI中的一个组件,用于文件上传。在使用el-upload组件时,可以通过绑定事件来处理文件上传前后的逻辑。其中,`success`事件是上传成功后触发的一个事件。当文件上传成功后,el-upload会触发`success`事件,并传递一个包含响应数据的回调函数。
el-upload的`success`事件通常用于处理上传成功后的业务逻辑,例如,更新界面上的文件列表、发送上传成功提示等。事件触发时,会携带一个事件对象,该对象包含了服务器返回的相关信息,如上传后的文件URL、文件名等。
具体使用方法示例如下:
```html
<template>
<el-upload
action="你的上传接口地址"
:on-success="handleSuccess">
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
</el-upload>
</template>
<script>
export default {
methods: {
handleSuccess(response, file, fileList) {
// response是服务器返回的数据
// file是当前上传的文件
// fileList是当前上传队列的文件列表
console.log('上传成功', response);
// 可以在这里执行一些业务逻辑,比如更新文件列表等
},
submitUpload() {
this.$refs.upload.submit();
}
}
}
</script>
```
在上面的代码中,当文件上传成功后,会触发`handleSuccess`方法,并且会打印出服务器返回的响应信息。
阅读全文