el-upload 查看的时候怎么显示已有文件
时间: 2023-12-14 21:35:24 浏览: 32
您好!对于 el-upload 组件,要显示已有文件,您可以使用 `file-list` 属性来设置已有文件列表。您可以将已有文件的信息包装成一个数组,然后将该数组赋值给 `file-list` 属性。
以下是一个示例代码:
```html
<el-upload
action="/your-upload-url"
:file-list="fileList"
list-type="picture"
>
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
```
```javascript
data() {
return {
fileList: [
{
name: '已有文件1.jpg',
url: 'http://example.com/已有文件1.jpg'
},
{
name: '已有文件2.png',
url: 'http://example.com/已有文件2.png'
}
]
};
}
```
在上述示例中,`fileList` 数组包含了两个已有文件对象,每个对象包含了文件的名称和URL。这样就可以在 el-upload 组件中显示已有文件。
希望能帮到您!如果还有其他问题,请随时提问。
相关问题
怎么监听el-upload有没有上传文件
要监听 `el-upload` 组件是否有文件上传,你可以使用 `change` 事件。该事件在文件列表发生变化时触发,包括文件添加、文件删除等操作。你可以在 `change` 事件的回调函数中检查上传的文件列表,以确定是否有文件被上传。
以下是一个示例代码:
```vue
<template>
<el-upload
class="upload-demo"
action="/your-upload-url"
:on-change="handleChange"
>
<el-button slot="trigger" size="small" type="primary">点击上传</el-button>
</el-upload>
</template>
<script>
export default {
methods: {
handleChange(file, fileList) {
// 判断文件列表是否为空来确定是否有文件被上传
if (fileList.length > 0) {
console.log('文件已上传');
} else {
console.log('文件未上传');
}
}
}
}
</script>
```
在上述代码中,当 `el-upload` 的文件列表发生变化时,会调用 `handleChange` 方法。在该方法中,我们可以通过判断 `fileList` 数组的长度来确定是否有文件被上传。
注意:以上示例代码基于 Vue 框架和 Element UI 组件库,你需要按照相应的环境进行配置和引入相关依赖。
el-upload上传文件判断文件列表是否有文件
您可以使用 `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` 属性。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)