element-ui 上传图片后清空图片显示的实例

今日长沙网络推广为大家带来一篇关于Element UI上传图片后如何清空显示的实例分享。相信对于使用Element UI进行开发的开发者来说，这无疑是一篇极具参考价值的文章。

在使用Element UI的el-upload组件上传图片时，有时候我们可能会遇到这样的问题：上传新图片后，页面仍然显示之前的图片。那么，如何清空之前上传的图片呢？其实，只需在组件上绑定ref，并在图片上传成功后的方法里调用this.$refs.upload.clearFiles()即可。

以下是具体的实现方式：

在HTML部分，使用el-upload组件进行图片上传，并绑定ref属性。添加一个el-button按钮用于触发图片上传。

```html

ref="upload"

class="upload-demo"

action="

:on-change="handleChange"

:file-list="fileList3"

>

点击上传

```

在Vue的methods中，调用this.$refs.upload.clearFiles()方法，以在图片上传成功后清空已上传的图片。

```javascript

methods: {

// ...其他方法

handleChange(file, fileList) {

// 上传成功后的操作

// 调用clearFiles方法清空已上传的图片

this.$refs.upload.clearFiles();

}

}

```

这样，每次上传新图片后，之前上传的图片都会被清空，只显示上传的图片。这对于需要频繁更换展示图片的场景来说，非常实用。希望这篇由长沙网络推广带来的分享能给大家提供帮助，同时也希望大家多多支持狼蚁SEO。

以上便是关于Element UI上传图片后如何清空显示的实例分享，内容生动、文体丰富，希望对你有所帮助。如果你还有其他关于Element UI或其他技术的问题，欢迎随时交流。