element-ui 里的 el-upload 如何在文件列表显示已经上传的文件
时间: 2024-03-02 10:53:51 浏览: 507
在 element-ui 的 el-upload 组件中,你可以通过设置 `file-list` 属性来显示已上传文件的列表。
具体来说,你可以在模板中添加如下代码:
```html
<el-upload
class="upload-demo"
action="/upload"
:file-list="fileList"
:on-success="handleSuccess">
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<el-button size="small" type="success" @click="submitUpload">上传到服务器</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
```
其中,`fileList` 是一个数组,用于存储已上传的文件列表。你可以在组件的 `on-success` 回调中将上传成功的文件信息添加到 `fileList` 中,例如:
```js
data() {
return {
fileList: []
}
},
methods: {
handleSuccess(response, file, fileList) {
this.fileList.push({
name: file.name,
url: response.url
});
},
submitUpload() {
this.$refs.upload.submit();
}
}
```
这样,在上传成功后,已上传的文件就会显示在 el-upload 组件中。
阅读全文