点进这篇文章的应该都是在 Tauri 拖拽时踩了坑的，按照惯用的方案，文件拖放一般会通过 onDrag、onDrop 实现，比如：

const handleDrag = (e: React.DragEvent<HTMLDivElement>) => {
	e.preventDefault();
	e.stopPropagation();
	if (e.type === 'dragenter' || e.type === 'dragover') {
		setDragActive(true);
	} else if (e.type === 'dragleave') {
		setDragActive(false);
	}
};

const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
	e.preventDefault();
	e.stopPropagation();
	setDragActive(false);
	if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
		const filesArray = Array.from(e.dataTransfer.files);
		handleFileUpload(filesArray);
	}
};

这种写法没有问题，但在 Tauri 中，默认是无效的，也就是你把文件拖上去根本触发不了 drag、drop 事件。

这个实际上是 Tauri 的问题，不是前端代码问题，Tauri 托管了 Webview 的相关事件，所以事件会先走到他那层，再由他决定是否转发给前端，对应的解决方法就有两种。

通过 Tauri 事件#

listen('tauri://file-drop', event => {
  console.log(event)
})
// 对应的还有 tauri://file-drop-cancelled 和 tauri://file-drop-hover

直接在 Tauri 层捕获拖放事件，通过回调通知前端去处理。

要注意这里拿到的只有文件路径，所以你还得通过 Tauri 的 fs 去读取文件内容（有坑，请参考往期文章）。

通过配置#

修改 tauri.conf.json 文件，在 tauri.windows 中，给项目加上 fileDropEnabled，并设置为 false，这样前端代码不需要动，就能在 Windows 下生效。

这种改法最简单，但兼容性比较差，fileDropEnabled 控制“是否在 webview 上启用文件拖放功能”，默认是 true，但在 Windows 下只有为 false 的时候才能在前端正确处理拖放事件。

至于如何做平台的判断，文档也没说。。。