el-uplod使用slot显示缩略图,准备状态的文件slot不显示
时间: 2024-03-03 13:47:18 浏览: 109
如果你使用的是 Element UI 中的 el-upload 组件,并且准备状态的文件 slot 不显示缩略图,可能是因为你没有正确配置相关的属性。
你可以在 el-upload 组件中设置 :show-file-list="false" 属性,这将隐藏文件列表。然后,你需要针对每个文件设置一个 slot。在这个 slot 中,你需要使用 v-if 来判断文件的状态是否为 "ready",如果是,就显示缩略图。以下是示例代码:
```html
<el-upload
action="/your/upload/url"
:show-file-list="false"
:on-success="handleSuccess"
:on-error="handleError"
>
<template v-slot:default>
<el-button size="small" type="primary">点击上传</el-button>
</template>
<template v-slot:file="file">
<div v-if="file.status === 'ready'">
<img :src="file.url" style="max-width: 100%; max-height: 100px;">
</div>
</template>
</el-upload>
```
注意,上面的代码中的 handleSuccess 和 handleError 是 el-upload 组件中的回调函数,你需要根据自己的需要进行配置。此外,你还需要在后端正确地处理上传文件的请求,才能让 el-upload 组件正常工作。
阅读全文