el-upload拖入多个文件重复提交
时间: 2025-01-15 15:55:03 浏览: 80
### 解决 `el-upload` 组件多文件拖拽时重复上传问题
当使用 `el-upload` 组件处理多文件拖拽操作时,可能会遇到重复提交的问题。这通常是因为每次触发拖拽事件都会重新调用 `onChange` 方法,而该方法默认会将新文件追加到已有的文件列表中。
为了防止这种情况的发生,可以在 `onChange` 回调函数内实现逻辑控制,确保不会重复添加相同的文件。具体做法如下:
#### Vue 部分配置
```html
<template>
<el-upload
:on-change="handleUpload"
:before-upload="beforeFileUpload"
:auto-upload="false"
:show-file-list="true"
drag
action="#"
ref="upload"
multiple
style="display:block;"
>
<div class="el-upload__text">拖拽文件或点击上传</div>
</el-upload>
</template>
<script>
export default {
methods: {
handleUpload(file, fileList) {
const isDuplicate = this.$refs.upload.uploadFiles.some(
(item) => item.name === file.name && item.uid !== file.uid
);
if (!isDuplicate) {
console.log('New File Added:', file);
} else {
console.warn(`File ${file.name} already exists.`);
}
},
beforeFileUpload(file) {
// 自定义校验逻辑,比如检查文件名是否存在
let existFlag = false;
this.$refs.upload.uploadFiles.forEach((element) => {
if (element.name === file.name) {
existFlag = true;
}
});
if (existFlag) {
alert(`${file.name} 已存在`);
return false;
}
return true;
},
clearFiles() {
this.$refs.upload.clearFiles();
}
}
}
</script>
```
通过上述代码,在 `handleUpload` 函数里增加了判断语句来检测是否有同名文件存在于当前待上传队列中;如果发现有相同名称的文件,则阻止其加入并给出提示信息。此外还提供了 `clearFiles()` 方法用于清空整个文件列表以便于重置状态[^1]。
另外需要注意的是,对于某些特定场景下可能还需要考虑更多因素,例如文件路径、修改时间戳等更精确的信息来进行唯一性判定[^2]。
阅读全文
相关推荐















