this.$message({ message: '上传成功', type: 'success' });上传多张图片只弹出一次上传成果的弹窗以及代码
时间: 2024-02-14 14:07:25 浏览: 21
如果你想上传多张图片后只弹出一次上传成功的弹窗,你可以在上传成功的回调函数中添加一个计数器,每次上传成功后计数器加1,直到计数器等于上传的图片数量时才弹出上传成功的弹窗。
以下是一个示例代码:
```
<template>
<div>
<el-upload
:action="uploadUrl"
:on-success="handleUploadSuccess"
:before-upload="beforeUpload"
:limit="3"
multiple
>
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
</div>
</template>
<script>
export default {
data() {
return {
uploadUrl: 'your upload url',
count: 0, // 初始化计数器
}
},
methods: {
beforeUpload(file) {
// 上传前的处理
},
handleUploadSuccess(response, file, fileList) {
// 上传成功后的处理
this.count += 1 // 计数器加1
if (this.count === fileList.length) { // 如果计数器等于上传的图片数量
this.$message({ message: '上传成功', type: 'success' }) // 弹出上传成功的弹窗
this.count = 0 // 重置计数器
}
},
},
}
</script>
```
这个示例代码使用了Element UI的`el-upload`组件来上传图片,并在上传成功的回调函数`handleUploadSuccess`中处理计数器和弹窗。同时,为了上传多张图片,需要将`multiple`属性设置为`true`,并且将`limit`属性设置为上传的图片数量。