el-upload显示已上传文件
时间: 2023-09-06 20:07:19 浏览: 404
文件上传下载显示
对于 el-upload 组件来说,要显示已上传的文件,你需要使用其 upload-success 事件来获取上传成功的文件信息,然后在页面上展示这些文件信息。具体的实现步骤如下:
1. 在 el-upload 组件上绑定 upload-success 事件,例如:
```html
<el-upload
action="/your-upload-api"
:on-success="handleUploadSuccess"
>
<!-- 其他组件内容 -->
</el-upload>
```
2. 在 Vue 实例中定义 handleUploadSuccess 方法,用于处理上传成功的文件信息,例如:
```javascript
methods: {
handleUploadSuccess(response, file, fileList) {
// response 为上传成功后服务器返回的数据
// file 为当前上传的文件对象
// fileList 为已上传的文件列表
// 在这里你可以将文件信息保存到 data 中,然后在页面上展示
this.fileList = fileList;
}
}
```
3. 在页面中展示已上传的文件信息,例如:
```html
<div v-for="file in fileList" :key="file.uid">
{{ file.name }}
</div>
```
通过以上步骤,你可以在 el-upload 组件中获取并展示已上传的文件信息。请根据你的实际需求进行适当修改和完善。
阅读全文