el-upload file-list
时间: 2023-10-15 18:30:55 浏览: 369
el-upload 是一个基于 Element UI 的文件上传组件,file-list 是其一个属性,用于指定已经上传的文件列表。
你可以使用 file-list 属性来显示已经上传的文件列表,该属性接受一个数组作为参数,每个元素都代表一个已上传的文件。每个文件对象需要包含以下属性:
- name: 文件名
- url: 文件的 URL 地址
例如,可以将以下代码添加到你的 Vue 组件中以使用 el-upload 和 file-list 属性:
```vue
<template>
<div>
<el-upload
class="upload-demo"
action="/your-upload-api"
:file-list="fileList"
:on-success="handleUploadSuccess"
>
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
</div>
</template>
<script>
export default {
data() {
return {
fileList: []
};
},
methods: {
handleUploadSuccess(response) {
// 处理上传成功后的逻辑
// 将上传成功的文件信息添加到 fileList 数组中
this.fileList.push({
name: response.name,
url: response.url
});
}
}
}
</script>
```
在上述代码中,`fileList` 是一个空数组,当文件上传成功时,`handleUploadSuccess` 方法会被调用,并将上传成功的文件信息添加到 `fileList` 数组中。然后,`el-upload` 组件会根据 `fileList` 数组中的文件信息来渲染已上传文件列表。
请注意,上述代码中的 `action` 属性需要替换为你实际的文件上传接口地址。
阅读全文