el-upload file-list 没值
时间: 2023-08-29 12:11:47 浏览: 211
vue element upload组件 file-list的动态绑定实现
如果 `el-upload` 的 `file-list` 属性没有值,可能是因为您没有正确处理或维护上传文件列表。请确保您在上传文件时更新了 `file-list` 属性的值。
以下是一个示例,展示了如何使用 `file-list` 属性来显示上传的文件列表:
```vue
<template>
<el-upload
class="upload-demo"
action="/your-upload-url"
:file-list="fileList"
:on-change="handleChange"
:on-success="handleSuccess"
:on-error="handleError"
>
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
</template>
<script>
export default {
data() {
return {
fileList: [] // 初始化文件列表为空数组
};
},
methods: {
handleChange(file, fileList) {
// 文件状态改变时的回调函数,更新文件列表
this.fileList = fileList;
},
handleSuccess(response, file, fileList) {
// 上传成功的回调函数,更新文件列表
this.fileList = fileList;
},
handleError(error, file, fileList) {
// 上传失败的回调函数,更新文件列表
this.fileList = fileList;
}
}
};
</script>
```
在上述示例中,我们通过维护 `fileList` 数据属性来跟踪上传的文件列表。在 `handleChange`、`handleSuccess` 和 `handleError` 方法中,我们更新了 `fileList` 的值,并在模板中通过 `:file-list` 属性将其绑定到 `el-upload` 组件上。这样就能够正确显示上传的文件列表。请确保您的代码中有类似的逻辑来维护 `fileList` 的值。
阅读全文