Element Plus 的 el-upload 组件默认只支持选择文件，通过操作其内部 <input> 的 webkitdirectory 属性，可以开启选择整个文件夹上传的功能，并且可以选择文件夹或单个文件两种模式切换。

实现思路

el-upload 内部隐藏了一个 <input type="file">，通过 document.querySelector(".el-upload__input") 获取该元素，动态设置 webkitdirectory 属性即可切换文件夹选择模式：

  • webkitdirectory = true：选择文件夹（会展开该目录下所有文件）
  • webkitdirectory = false：选择单个文件

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<template>
  <el-upload
    multiple
    action="http://192.168.1.8:3030/file/upload"
    :auto-upload="false"
    :show-file-list="false"
    :on-change="handleChange"
  >
    <template #trigger>
      <el-button type="primary" @click="folderMode(false)">上传文件</el-button>
      <el-button type="primary" @click="folderMode(true)">上传文件夹</el-button>
    </template>
  </el-upload>
</template>
<script setup lang="ts">
import { reactive, onMounted, nextTick } from "vue";
import type { UploadFile, UploadFiles } from "element-plus";
const state = reactive({
  uploadEle: null as Element | null,
  uploadList: [],
});
const folderMode = (type: boolean) => {
  if (state.uploadEle) {
    state.uploadEle.webkitdirectory = type;
  }
};
const handleChange = async (
  uploadFile: UploadFile,
  uploadFiles: UploadFiles
) => {
  console.log(uploadFile, uploadFiles);
};
onMounted(() => {
  nextTick(() => {
    state.uploadEle = document.querySelector(".el-upload__input");
  });
});
</script>
<style lang="less" scoped></style>

代码说明

  • onMounted 中通过 nextTick 等待组件渲染完成后，用 .el-upload__input 拿到内部文件选择框
  • folderMode(true) / folderMode(false) 两个按钮分别切换「上传文件夹」和「上传文件」模式
  • handleChange 中 uploadFiles 是本次选择的文件列表，文件夹模式下会包含所有子文件，可在此进行上传处理

示例