el-upload可多文件上传,limit动态改变,当limit为1时,为什么上传一个文件也会触发on-exceed,无法上传
时间: 2024-03-28 08:38:35 浏览: 48
el-upload组件是可以实现多文件上传的,同时也可以设置上传数量的限制,当限制数量为1时,只能上传一个文件。在el-upload组件中,当上传的文件超过限制数量时会触发on-exceed事件,此时无法上传文件。
如果设置了限制数量为1,但上传一个文件时仍然触发on-exceed事件,可能是因为在代码中动态修改了限制数量,但是组件并没有重新渲染导致的。解决方法是在修改限制数量后手动调用一次组件的clearFiles方法清空文件列表,然后再次上传文件即可。
相关问题
el-upload on-exceed
`el-upload` 组件中的 `on-exceed` 属性用于处理文件超出限制的情况。当用户选择的文件数量超过了 `el-upload` 组件的限制时,该属性绑定的事件处理函数将被触发。
你可以在 `on-exceed` 属性上绑定一个方法,然后在方法中处理文件超出限制的逻辑。例如,你可以在该方法中显示一个错误提示,告知用户超出了文件数量限制。
以下是一个示例:
```vue
<template>
<el-upload
action="/upload"
:on-exceed="handleExceed"
>
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
</template>
<script>
export default {
methods: {
handleExceed(files, fileList) {
this.$message.warning(`最多只能上传 ${this.limit} 个文件`);
}
}
};
</script>
```
在上面的示例中,当用户选择的文件数量超过 `limit` 变量指定的值时,会触发 `handleExceed` 方法。该方法会通过 `$message.warning` 方法显示一个警告提示框,告知用户超出了文件数量限制。
你可以根据实际情况自定义 `handleExceed` 方法来适应你的应用需求。
el-upload多文件手动上传
你可以使用 `el-upload` 组件来实现多文件的手动上传。以下是一个简单的示例代码:
```html
<template>
<div>
<el-upload
ref="upload"
action="/upload"
:auto-upload="false"
multiple
:limit="3"
:on-exceed="handleExceed"
>
<el-button size="small" type="primary">选择文件</el-button>
<div slot="tip" class="el-upload__tip">只能上传不超过 3 个文件</div>
</el-upload>
<el-button size="small" type="success" @click="uploadFiles">上传</el-button>
</div>
</template>
<script>
export default {
methods: {
handleExceed(files, fileList) {
this.$message.warning(`只能上传 ${this.limit} 个文件`);
},
uploadFiles() {
const fileList = this.$refs.upload.uploadFiles;
fileList.forEach(file => {
// 在这里执行你的上传逻辑
// 例如使用 axios 发送请求
// axios.post('/upload', file)
console.log(file);
});
},
},
};
</script>
```
在上面的代码中,我们使用 `el-upload` 组件来创建一个文件上传的区域。设置 `auto-upload` 属性为 `false`,这样选择文件后不会自动上传。通过设置 `multiple` 属性可以实现多文件上传,而 `limit` 属性可以限制最多上传的文件数量。
当选择的文件数量超过限制时,会触发 `on-exceed` 方法,我们在这里给出一个提示。
点击"选择文件"按钮后,会调用 `uploadFiles` 方法来获取选择的文件列表,并可以在该方法中执行你的上传逻辑。你可以按照你的需求使用 axios 或其他方式发送请求,将文件上传到服务器。
上述代码只是一个简单的示例,你可以根据自己的实际需求进行修改和扩展。