el-upload等待所有上传文件成功以后在处理之后的异步事件
时间: 2023-08-10 17:02:10 浏览: 442
对于el-upload组件,你可以使用`@success`事件来监听所有上传文件成功后的事件。在这个事件的处理函数中,你可以执行后续的异步操作。
以下是一个示例代码:
```html
<template>
<el-upload
ref="upload"
action="/your-upload-url"
:on-success="handleSuccess"
:on-error="handleError"
:on-exceed="handleExceed"
:limit="3"
:multiple="true"
:auto-upload="false"
>
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
</template>
<script>
export default {
methods: {
handleSuccess(response, file, fileList) {
// 处理上传成功的文件
console.log(response, file, fileList);
},
handleError(err, file, fileList) {
// 处理上传失败的文件
console.log(err, file, fileList);
},
handleExceed(files, fileList) {
// 处理文件超出个数限制的情况
console.log(files, fileList);
},
submitUpload() {
// 提交上传请求
this.$refs.upload.submit();
}
}
}
</script>
```
在上述示例中,`handleSuccess`方法会在每个文件上传成功后触发。你可以在这个方法里面处理成功上传的文件,执行后续的异步操作。
注意,为了实现等待所有文件上传成功后再处理后续事件,我在示例中取消了自动上传的功能,并添加了一个`submitUpload`方法,通过调用`this.$refs.upload.submit()`来手动触发上传请求。
希望能帮到你!如果你对此有任何疑问,请随时向我提问。
阅读全文