拖拽上传时文件被多次提交怎么办？

斐然 Dev 提问于 2026-01-30 00:58:31 阅读 350

交互

在做文件拖拽上传功能时，发现每次拖拽文件到区域后，文件会被多次提交到后端，控制台显示重复的POST请求，但手动点击上传按钮没问题。

尝试过在dragover事件里用了e.preventDefault()，也给元素加了ondragover属性，但拖拽后还是触发多次。代码大致是这样的：


document.getElementById('dropzone').addEventListener('drop', (e) => {
  e.preventDefault();
  const files = e.dataTransfer.files;
  Array.from(files).forEach(file => {
    uploadFile(file); // 这个函数会触发两次
  });
});

奇怪的是如果直接用input标签选择文件上传就不会重复，换成拖拽方式就出问题。有没有可能是事件冒泡导致的？或者需要额外设置某个属性？

文件拖拽上传

我来解答赞 20 收藏

反馈

2 条解答

欧阳树潼 Lv1

这个问题大概率是事件绑定重复或者事件冒泡导致的，我来帮你分析一下。

首先你提到 uploadFile 函数被触发了多次，这种情况很可能是 drop 事件被绑定了不止一次。比如，如果你的代码里有动态加载或者重复初始化的逻辑，每次都会给 #dropzone 元素重新绑定一次事件监听器，这样就会导致拖拽时触发多次上传。

解决方法很简单，在绑定事件之前先移除已有的监听器，可以用 removeEventListener 来清理掉旧的绑定。像这样：



const dropzone = document.getElementById('dropzone');



function handleDrop(e) {

  e.preventDefault();

  const files = e.dataTransfer.files;

  Array.from(files).forEach(file => {

    uploadFile(file);

  });

}



// 先移除可能存在的旧监听器

dropzone.removeEventListener('drop', handleDrop);

// 再绑定新的监听器

dropzone.addEventListener('drop', handleDrop);

另外一种可能性确实是事件冒泡引起的。虽然你已经在 drop 事件里调用了 e.preventDefault()，但如果父级元素上也有类似的事件监听器，就可能会重复触发。你可以检查一下父级元素是否有绑定相关事件，或者干脆在 handleDrop 函数里加一行 e.stopPropagation()，阻止事件继续冒泡：



function handleDrop(e) {

  e.preventDefault();

  e.stopPropagation(); // 阻止事件冒泡

  const files = e.dataTransfer.files;

  Array.from(files).forEach(file => {

    uploadFile(file);

  });

}

最后还有一点要注意，后端处理上传请求的时候，最好加个文件去重逻辑。比如可以根据文件名和文件大小做校验，避免同一个文件被重复提交到服务器。这不仅是为了解决前端的问题，还能防止一些意外情况，比如网络波动导致的重复请求。

总结一下，先确保事件绑定没有重复，然后用 e.stopPropagation() 阻止冒泡，最后后端加个去重逻辑兜底。这样应该就能彻底解决你的问题了。

2026-02-15 16:10

Des.雅涵 Lv1

问题出在事件绑定和阻止默认行为不完全。除了 dragover，还需要确保 drop 事件也正确阻止了默认行为，并且清空之前的事件绑定。

直接改你的代码，这样写：

const dropzone = document.getElementById('dropzone');



dropzone.addEventListener('dragover', (e) => {

  e.preventDefault();

});



dropzone.addEventListener('drop', (e) => {

  e.preventDefault();

  const files = e.dataTransfer.files;

  Array.from(files).forEach(file => {

    uploadFile(file);

  });

});

检查一下是否还有其他地方重复绑定了 drop 事件，有的话去掉多余的绑定。

2026-01-30 18:28