vue element ui upload 组件内图片清空
时间: 2023-07-01 15:17:22 浏览: 595
element-ui 上传图片后清空图片显示的实例
5星 · 资源好评率100%
如果你想在 Element UI Upload 组件内清空图片,可以使用以下方法:
1. 通过 `ref` 获取 Upload 组件实例,并调用 `clearFiles` 方法:
```html
<template>
<div>
<el-upload
ref="upload"
class="upload-demo"
action="/upload"
:file-list="fileList"
:auto-upload="false"
list-type="picture">
<el-button slot="trigger">上传文件</el-button>
<el-button type="primary" @click="clearFiles">清空文件</el-button>
</el-upload>
</div>
</template>
<script>
export default {
data() {
return {
fileList: [
// 初始文件列表
]
}
},
methods: {
clearFiles() {
this.$refs.upload.clearFiles()
}
}
}
</script>
```
2. 通过给 Upload 组件绑定一个 `key` 属性,来强制刷新 Upload 组件实例:
```html
<template>
<div>
<el-upload
key="upload"
class="upload-demo"
action="/upload"
:file-list="fileList"
:auto-upload="false"
list-type="picture">
<el-button slot="trigger">上传文件</el-button>
<el-button type="primary" @click="clearFiles">清空文件</el-button>
</el-upload>
</div>
</template>
<script>
export default {
data() {
return {
fileList: [
// 初始文件列表
]
}
},
methods: {
clearFiles() {
this.fileList = []
}
}
}
</script>
```
以上两种方法都可以实现清空图片的效果,具体使用哪种方法可以根据你的实际情况来决定。
阅读全文