el-upload可多文件上传,limit动态改变,当limit为1时,为什么上传一个文件也会触发on-exceed,无法上传
时间: 2024-03-28 18:40:26 浏览: 55
el-upload 组件在 `limit` 属性为 1 时,表示只允许上传一个文件。此时,当你选择一个文件进行上传时,组件会首先校验文件大小是否超过 `file-size-limit` 属性设置的限制,如果超过限制,则触发 `on-exceed` 事件。如果文件大小未超过限制,则会执行 `before-upload` 方法,如果此方法返回 false,则不会上传文件,也不会触发 `on-exceed` 事件。
如果你在 `limit` 为 1 时,选择一个文件进行上传,也触发了 `on-exceed` 事件,可能是因为你设置了 `file-size-limit` 属性的值过小,导致选择的文件大小超过了限制,也可能是因为你的 `before-upload` 方法返回了 false,导致文件不会上传。你可以检查一下这两个属性的设置,看看是否符合你的需求。
相关问题
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 或其他方式发送请求,将文件上传到服务器。
上述代码只是一个简单的示例,你可以根据自己的实际需求进行修改和扩展。