ElementUI中el-upload上传修改支持上传文件夹_el-upload上传文件夹

需求：上传某文件夹并获取文件夹的本地路径

看到上传的需求，首先想到的是elementUI中是否可以使用并达到预期，看了下官方给的文档 Upload 上传，但是都支持上传jpg/png文件，无法选中文件夹上传所以无法获取文件夹的上传路径以及相关信息

代码实现可上传文件夹并获取路径

<el-upload
ref="uploadFile"
:show-file-list="false"
:before-upload="beforeUpload"
action="/">
<el-button :disabled="type==='edit'" class="add-button" type="primary" size="small" @click="handleAddFolder">添加</el-button>
</el-upload>
methods: {
    // 点击文件夹路径上传按钮
    handleAddFolder () {
      this.$nextTick(() => {
        this.$refs.uploadFile.$children[0].$refs.input.webkitdirectory = true
      })
    },
    // 文件夹路径上传之前钩子函数
    beforeUpload (file) {
	  // file.path为文件夹的路径
      this.form.Folder = file.path
    },
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21