el-upload on-success不触发
时间: 2023-11-06 09:01:39 浏览: 116
el-upload的on-success方法不触发的原因可能是auto-upload属性设置为false,并且使用了http-request属性来进行上传。在这种情况下,需要在http-request属性中手动调用uploadSuccess方法来触发on-success方法。
具体的解决方法是,在submitUpload方法中,调用http请求的then方法中,手动调用uploadSuccess方法,如下所示:
```javascript
submitUpload() {
this.axios({
method: 'post',
url: 'http://localhost:8090/uploadFile',
data: this.fileData,
timeout: 4000
}).then((response) => {
this.uploadSuccess(response);
})
}
```
这样就能确保on-success方法被正确触发了。
相关问题
el-upload on-success 不生效
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属性,最后考虑组件版本兼容性问题。
el-upload on-success 传参
el-upload是Element UI中的一个上传组件,on-success是el-upload组件的一个事件,用于在文件上传成功后触发的回调函数。在on-success事件中,可以通过参数来获取上传成功后的相关信息。
具体来说,on-success事件的传参包括以下几个参数:
1. response:上传成功后服务器返回的响应数据。可以通过response来获取服务器返回的上传结果或其他相关信息。
2. file:当前上传的文件对象。可以通过file来获取文件的名称、大小、类型等信息。
下面是一个示例代码,展示了如何使用on-success事件及其传参:
```html
<template>
<el-upload
action="/upload"
:on-success="handleSuccess"
>
<el-button slot="trigger" size="small" type="primary">点击上传</el-button>
</el-upload>
</template>
<script>
export default {
methods: {
handleSuccess(response, file) {
console.log('上传成功');
console.log('服务器返回的响应数据:', response);
console.log('当前上传的文件对象:', file);
// 在这里可以根据需要处理上传成功后的逻辑
}
}
}
</script>
```