element ui的Upload 如何在关闭弹窗的时候清空图片
时间: 2023-07-19 18:44:39 浏览: 116
可以在关闭弹窗的时候,调用 element ui 的 Upload 组件的清空文件方法,示例代码如下:
```javascript
<template>
<el-dialog :visible.sync="dialogVisible" @before-close="handleBeforeClose">
<el-upload
ref="upload"
action="/upload"
:file-list="fileList"
:on-change="handleChange"
:on-success="handleSuccess"
>
<el-button slot="trigger">选择文件</el-button>
<el-button slot="tip" type="primary">或者拖拽文件到此处上传</el-button>
</el-upload>
</el-dialog>
</template>
<script>
export default {
data() {
return {
dialogVisible: false,
fileList: []
};
},
methods: {
handleBeforeClose(done) {
this.$refs.upload.clearFiles();
done();
},
handleChange(file, fileList) {
console.log(file, fileList);
this.fileList = fileList;
},
handleSuccess(response, file, fileList) {
console.log(response, file, fileList);
this.fileList = fileList;
}
}
};
</script>
```
在弹窗即将关闭的时候,调用 Upload 组件的 clearFiles 方法,清空已选文件列表即可。
阅读全文