vue3使用element-plus上传多张图片怎么知道上传图片的数量
时间: 2023-10-09 15:05:39 浏览: 135
vue3-element-admin:vue3 + element-plus + typescript 后台管理系统
在使用element-plus上传多张图片时,可以监听`change`事件来获取上传的图片数量。代码示例如下:
```html
<template>
<el-upload
class="upload-demo"
action="https://jsonplaceholder.typicode.com/posts/"
:on-change="handleChange"
:multiple="true"
:limit="3"
:show-file-list="false"
>
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
</template>
<script>
export default {
methods: {
handleChange(file, fileList) {
console.log('上传的图片数量:', fileList.length);
}
}
}
</script>
```
在上面的代码中,我们监听了`change`事件,并在事件处理函数中打印了上传的图片数量。在`<el-upload>`组件中,我们设置了`multiple`为`true`,表示可以选择多个文件进行上传。同时,我们还设置了`limit`为`3`,表示最多只能上传3个文件。`show-file-list`设置为`false`,表示不显示已上传的文件列表。
阅读全文