show-file-list赋值为false,通过slot进行el-upload的图片回显
时间: 2023-07-19 20:15:00 浏览: 118
您好,针对您的问题,我大概理解您的意思是想在 el-upload 组件上传图片成功之后,通过 slot 的方式将图片回显到页面上,并且想要控制是否展示已上传的图片列表,是吗?
如果是这样的话,可以按照以下步骤进行操作:
1. 将 el-upload 的 show-file-list 属性设置为 false,即不展示已上传的文件列表。
2. 在 el-upload 的 onSuccess 事件中,获取到上传成功后的文件地址,并将其赋值给父组件的 data 属性中。
3. 在 el-upload 的 slot 中,通过 v-for 循环遍历父组件 data 中的图片地址,将每个图片地址渲染为一个 img 标签,从而实现图片回显。
下面是一个简单的示例代码,供您参考:
```html
<template>
<el-upload
:show-file-list="false"
:on-success="handleSuccess"
>
<slot>
<img v-for="(url, index) in uploadedImages" :key="index" :src="url" />
</slot>
</el-upload>
</template>
<script>
export default {
data() {
return {
uploadedImages: []
}
},
methods: {
handleSuccess(response) {
// 上传成功后,将文件地址保存到 uploadedImages 中
this.uploadedImages.push(response.url)
}
}
}
</script>
```
以上代码中,el-upload 组件的 slot 中通过 v-for 循环遍历 uploadedImages 数组中的图片地址,并将每个地址渲染为一个 img 标签。在 handleSuccess 方法中,获取到上传成功后的文件地址,并将其 push 到 uploadedImages 数组中,从而实现了图片回显的功能。同时,由于 show-file-list 属性被设置为 false,因此 el-upload 组件不会展示已上传的文件列表。
希望以上回答能够帮到您,如有疑问请随时追问。
阅读全文