el-upload只要文件列表
时间: 2025-01-23 07:06:23 浏览: 60
### 配置 `el-upload` 组件仅用于显示文件列表
为了使 `el-upload` 组件只作为文件列表展示工具而不触发实际上传操作,可以设置特定属性并调整组件行为。具体来说,可以通过禁用默认的上传功能以及利用插槽来自定义文件列表展示。
#### 关键配置项说明
- **action**: 设置为空字符串或无效URL以防止真实请求发送。
- **auto-upload**: 将此选项设为 `false` 来阻止自动上传。
- **disabled**: 如果不需要用户交互可以选择将其设为 `true`.
- **list-type**: 定义文件列表样式,默认有三种类型:"text", "picture", 和 "picture-card".
- **file-list**: 提供初始文件列表数据绑定至该属性.
#### 实现代码示例
以下是基于上述原则的一个简单实现案例:
```html
<template>
<div>
<!-- el-upload 组件 -->
<el-upload
class="upload-demo"
:action="'about:blank'"
:auto-upload="false"
:disabled="true"
list-type="text"
:file-list="localFileList">
<el-button size="small" type="primary">点击添加文件</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
</div>
</template>
<script>
export default {
data() {
return {
localFileList: [
{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr/thumbnail/360x360/format/webp/quality/100'}, // 示例文件条目
// 更多预加载文件...
]
};
}
};
</script>
```
在此例子中,通过将 `action` 属性指向一个不会引起任何网络活动的目标 (`'about:blank'`) 并关闭自动化上传机制(`:auto-upload="false"`), 同时冻结控件状态(`:disabled="true"`), 这样就实现了纯粹用来查看已知文件集合的效果[^1]。
另外值得注意的是,在某些场景下可能还需要处理一些额外的需求比如动态更新文件列表等内容,这时可以根据实际情况进一步扩展逻辑[^2].
阅读全文
相关推荐

















