el-upload可多文件上传,limit动态改变,当limit为1时,为什么上传一个文件也会触发on-exceed,无法上传
时间: 2024-03-09 10:44:13 浏览: 7
根据你的描述,可能是由于 el-upload 组件在上传文件时,会将所有文件都存储在一个数组中,因此在 limit 为 1 时,上传一个文件也会触发 on-exceed 事件。
解决这个问题的方法是,在上传文件前,判断已上传的文件数量是否超过了 limit 的限制,如果已经超过了,则不再上传新的文件,并触发 on-exceed 事件。可以参考以下代码:
```javascript
<el-upload
:limit="limit"
:before-upload="beforeUpload"
@exceed="handleExceed"
>
<!-- ... -->
</el-upload>
data() {
return {
limit: 1, // 初始值为1
fileList: [] // 已上传的文件列表
}
},
methods: {
beforeUpload(file) {
// 判断已上传的文件数量是否超过了 limit 的限制
if (this.fileList.length >= this.limit) {
this.$message.warning(`最多只能上传 ${this.limit} 个文件!`);
return false;
}
this.fileList.push(file); // 将上传的文件存储到已上传的文件列表中
return true;
},
handleExceed(files, fileList) {
this.$message.warning(`最多只能上传 ${this.limit} 个文件!`);
}
}
```
在这个示例中,我们通过 before-upload 事件来判断已上传的文件数量是否超过了 limit 的限制,如果超过了,则不再上传新的文件,并弹出提示信息;如果没有超过,则将上传的文件存储到已上传的文件列表中。同时,我们在 handle-exceed 事件中也要进行相应的提示。这样就可以避免上传一个文件时也触发 on-exceed 事件的问题。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)