el-upload图片列表缩略图上传文件时显示默认自定义图标,上传图片则显示图片
时间: 2024-11-10 16:26:28 浏览: 408
在`el-upload`组件中,如果你想在图片列表中根据上传内容的不同显示不同的图标,可以结合使用`list-type`属性和自定义的处理函数。`list-type`属性可以设置为预览模式,比如`'text'`表示文本描述,`'icon'`表示图标,而当文件类型为图片时,你可以利用`file-list`事件的回调来判断。
首先,在`<el-upload>`的配置中设置`list-type`为`'icon'`:
```html
<el-upload
list-type="icon"
:action="uploadUrl"
:on-error="handleError"
:before-upload="beforeUpload"
>
<i class="el-icon-folder-open-outline" slot="trigger"></i>
<span class="el-upload__text">将文件拖到此处,或点击上传</span>
</el-upload>
```
然后,在JavaScript中处理`file-list`事件,检查文件是否是图片,并动态改变图标:
```javascript
methods: {
handleFileList(files) {
files.forEach(file => {
if (file.type.startsWith('image')) {
file.url = URL.createObjectURL(file);
// 如果你想直接显示图片而不是图标,可以替换为下面这行
// this.$refs.uploadIcon.innerHTML = '<img src="' + file.url + '"/>';
} else {
// 图片以外的文件,继续保持图标样式
file.icon = 'el-icon-file';
}
});
},
}
```
在这里,`this.$refs.uploadIcon`应该是你的图标元素引用,可以根据实际DOM结构调整。当文件是图片时,它会显示图片;如果不是图片,则显示默认图标。
阅读全文
相关推荐


















