Element Plus 文件上传组件中禁止拖拽文件夹的技术实现

背景介绍

Element Plus 作为一款优秀的 Vue 3 UI 组件库，其上传组件(el-upload)提供了丰富的文件上传功能。在实际业务场景中，开发者经常需要限制用户只能上传文件而不能上传文件夹，特别是在 Windows 系统环境下，用户可能会无意中拖拽整个文件夹到上传区域。

技术原理分析

Element Plus 的上传组件基于 HTML5 的 File API 实现。当用户拖拽文件或文件夹到上传区域时，浏览器会触发相应的事件并传递文件信息。关键点在于：

1. 文件对象会包含 type 属性，表示文件类型
2. 文件夹对象的 type 属性为空字符串
3. 通过检查 type 属性可以区分文件和文件夹

实现方案

基础实现方法

最简单的实现方式是在 change 事件中过滤掉文件夹：

const change = (file, list) => {
  if (!file.raw.type) {
    const i = list.findIndex(item => item === file)
    list.splice(i, 1)
  }
}

完整组件示例

<template>
  <el-upload
    class="upload-demo"
    drag
    action="https://example.com/upload"
    multiple
    :on-change="change"
  >
    <el-icon class="el-icon--upload"><upload-filled /></el-icon>
    <div class="el-upload__text">
      Drop file here or <em>click to upload</em>
    </div>
    <template #tip>
      <div class="el-upload__tip">
        jpg/png files with a size less than 500kb
      </div>
    </template>
  </el-upload>
</template>

<script setup>
import { UploadFilled } from '@element-plus/icons-vue'

const change = (file, list) => {
  if (!file.raw.type) {
    const i = list.findIndex(item => item === file)
    list.splice(i, 1)
    // 可以在这里添加提示信息，告知用户不能上传文件夹
  }
}
</script>

进阶优化建议

1. 用户体验优化：当检测到用户上传了文件夹时，可以显示友好的提示信息，而不是静默移除

2. 拖拽区域优化：可以在拖拽过程中实时检测拖拽内容，提前提示用户不能上传文件夹

3. 浏览器兼容性处理：不同浏览器对文件夹拖拽的处理可能略有差异，需要进行充分测试

4. 性能考虑：对于大量文件的过滤操作，可以使用更高效的算法

总结

通过合理利用 Element Plus 上传组件的事件机制和文件对象的属性，开发者可以轻松实现禁止上传文件夹的功能。这种实现方式既保持了组件的原有功能，又满足了特定业务场景的需求，是一种优雅的解决方案。在实际项目中，开发者可以根据具体需求进一步扩展和优化这一功能。