el-upload上传文件成功后调用查询列表的方法不生效
时间: 2023-11-08 21:06:18 浏览: 137
elemetUi 组件--el-upload实现上传Excel文件的实例
5星 · 资源好评率100%
可能是因为上传文件是异步操作,需要等待上传完成后再调用查询列表的方法。你可以尝试在上传成功的回调函数中调用查询列表的方法,例如:
```javascript
<el-upload
action="/upload"
:on-success="handleSuccess"
>
</el-upload>
methods: {
handleSuccess(response) {
// 上传成功后调用查询列表的方法
this.getList()
},
getList() {
// 查询列表的方法
}
}
```
另外,你也可以在上传文件的时候禁用上传按钮,防止用户重复上传文件。例如:
```javascript
<el-upload
action="/upload"
:before-upload="beforeUpload"
:on-success="handleSuccess"
:disabled="uploading"
>
<el-button :loading="uploading">上传文件</el-button>
</el-upload>
data() {
return {
uploading: false // 是否正在上传
}
},
methods: {
beforeUpload() {
// 禁用上传按钮
this.uploading = true
},
handleSuccess(response) {
// 上传成功后调用查询列表的方法
this.getList()
// 启用上传按钮
this.uploading = false
},
getList() {
// 查询列表的方法
}
}
```
这样做可以提升用户体验,避免用户多次点击上传按钮。
阅读全文