el-upload上传文件判断文件列表是否有文件
时间: 2023-08-05 21:08:19 浏览: 243
【JavaScript源代码】vue el-upload上传文件的示例代码.docx
您可以使用 `el-upload` 组件的 `file-list` 属性来判断文件列表是否有文件。`file-list` 是一个数组,包含当前已上传的文件对象。您可以通过判断 `file-list` 的长度来确定文件列表是否有文件。如果 `file-list` 的长度大于 0,则表示有文件被上传。
以下是一个示例:
```html
<template>
<div>
<el-upload
class="upload-demo"
action="/your-upload-url"
:file-list="fileList"
:on-change="handleFileChange"
>
<el-button slot="trigger" size="small" type="primary">点击上传</el-button>
</el-upload>
<p v-if="fileList.length > 0">文件已上传</p>
<p v-else>文件未上传</p>
</div>
</template>
<script>
export default {
data() {
return {
fileList: [] // 文件列表
}
},
methods: {
handleFileChange(file, fileList) {
this.fileList = fileList;
}
}
}
</script>
```
在上面的代码中,我们使用了 `file-list` 属性来绑定文件列表数据,通过 `handleFileChange` 方法来更新 `fileList` 数据。在模板中,我们根据 `fileList.length` 的值来显示相应的提示信息。
请注意,需要根据实际的上传接口地址来设置 `action` 属性。
阅读全文