el-upload-list 使用
时间: 2023-11-23 16:57:25 浏览: 40
el-upload-list是Element UI中的一个组件,用于显示el-upload上传文件的列表。它可以展示已上传的文件,并提供删除已上传文件的功能。
以下是一个使用el-upload-list的示例:
```html
<template>
<div>
<el-upload
class="upload-demo"
:file-list="fileList"
:action="uploadUrl"
:before-upload="beforeUpload"
:on-remove="handleRemove"
>
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
<el-upload-list
:list-type="'picture-card'"
:file-list="fileList"
:auto-upload="false"
:on-remove="handleRemove"
>
<template slot-scope="{ file }">
<img :src="file.url" class="el-upload-list__item-thumbnail" alt="">
<span class="el-upload-list__item-actions">
<el-button size="mini" type="danger" icon="el-icon-delete" @click="handleRemove(file)"></el-button>
</span>
</template>
</el-upload-list>
</div>
</template>
<script>
export default {
data() {
return {
fileList: [],
uploadUrl: 'your-upload-url'
};
},
methods: {
beforeUpload(file) {
// 验证文件类型、大小等
// 返回 false 可以阻止文件上传
},
handleRemove(file) {
// 处理文件删除操作
}
}
};
</script>
```
在上述示例中,el-upload组件用于上传文件,el-upload-list组件用于展示已上传的文件列表。你可以根据自己的需求进行配置和样式调整。